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مقدمه 

هذا الكتاب موجه إلى المبتدئين والمحترفين فى تصميم وتطوير الويب سواء باستخدام 
برنامج Microsoft Expressio¬® Web‏ أو برامج أخرى. فهو يخطو بك خطوة تلو الأخرى 
لينتقل بك بدءٌ من مفاهيم الويب والإنترنت» ومرورً بكيفية التعامل مع أساسيات البرنامج» وانتهاءً 
بالتعرف على آفاق البرنامج وما يمكن أن يقدمه لك ويضيف إلي خبرتك مع تصميم وتطوير 
ا 

يتبع الكتاب أسلوبًا مبسطا فى تنظيم موضوعاته وعرض معلوماته من خلال أربعة أبواب 
تتضمن أغلب المعلومات المتاحة عن البرنامج والتى تساعدك على إجادة استخدام البرتامج 
وإنجاز أعمالك بصورة احترافية مميزة. 

یتناول کل باب موضوع کامل من موضو عات ›»Microsoft E×مressi0 ١® We‏ فى حین 
یتناول کل فصل من فصوله موضوعاً فرعيًا متگاملاً مع ما بعده» ومستکملا ما قبله» وفی نهاية 
الكتاب إن شاء الله ستجد نفسك وقد تعرفت فعلاً على أحد اهم البرامج الجديدة في عالم تصميم 
ا 

لذلك لابد عزيزى القارئ من أن تتسلسل فى قراءة هذا الكتاب وتنفيذ كافة العمليات 
او ن ا ا ل فسا 

فضلاء تابع قائمة محتويات الكتاب لسرعة الوصول إلى الموضوع المطلوب. 


الباب الأول: ما قبل خط البداية 0 


الفصل الأول: مقدمة a‏ 
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كثيرًا ما تعاملنا مع الويب ط٥7۷‏ كثْيرًا ما زرنا مواقع عدة على 
شبكة الإنترنت. إلا أننا على ضغاف صفحات هذا الباب»ء 
نتعرف سويًا على العديد من المعلومات التي حتما 
ستساعدك على التعامل بغفهم واستيعاب. 
تابع فصول هذا الباب لتعرف ما نرمي إليه: 

الفصل الأول: مقدمة. 

الفصل الثاني: واحهة برliمج Expression Web‏ . 
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الفصل التالث: أساسيات مواقع الويب طء. 


كثيرًا ما تتجاذب أطراف الحديث مع أصدقانك أوحيرانك عن 
الإنترنت ومواقعها وصغحاتهاء وكنيرًا ما تتناثر العديد من 
المغاهيم والمصطلحات التي نقولها أحيانًا ونحن غير مدركين 
لمعانيهاء أومستوعبين لمدى حجمها أومستواها. 

على صغاف صفحات هذا الفصل» نتعرف سويًا على العديد 
من تلك المغاهيم والمصطلحات. 
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مفدمه 

لا يمكن أن نتحدث عن تصميم وتطوير صفحات الويب دون أن نتكلم ونتناول شبكة 
الإنترنت ٠١٠1ء‏ والتي تمثل الوعاء الذي يشتمل على ما ستقوم بتصميمه أوتطويره. وهناك 
الكثير من الأسئلة التي تدور بخلد الآن» ومنها ماذا تكون الإنترنت؟› ,من يمتلكها؟» وبالتالي» من 
ا هاف رهل كاك تطور لكر نها 

وبدايةء نرغب في أن ترتب أفكارك وتتعامل مع السطور الاآئية باهتمام أكبر. فسوف 
رة كل سال ونضم اة رأة اة آمامت قي أبها الطاب ارين أن حال به مع 
التكذولوؤجياً الحديثة والتي متها شبكة الإنترفت: 


ما هي الإنترنت؟ 

الإنترنت (ا 1١٠۲٣٠‏ ٠1ا)‏ هي شبكة عالمية تربط عدة آلاف من الشبكات وملايين أجهزة 
الكمبيوتر المختلفة الأنواع والأحجام في العالم. وتكمن فائدة الإنترنت التي تسى أيضا الشبكة 
١6(‏ )في كونها وسيلة يستخدمها الأفراد والمؤسسات للتواصل وتبادل المعلومات . 


كيف نتصل مع العالم؟ 

ركي تكن أجوز الكشيرت من تانل :التلومات وإلاتضان فما بها ١‏ يدها ن 
التوافق مع مجموعة من معايير الاتصال التي د .(0) وتعتمد جميع أجهزة 
الكەتوتن المفضة با نتر تت برو توکو لا یی برو رگول الات رنت :)ھ1 îê îeË Poo‏ ¢ 
وهويقوم بتجزئة الرسائل الإلكترونية إلى وحدات بيانات تدعى الحزم (كا)ءهم)»ء كما إنه يتحكم 
بتوجيه البيانات (و ناه ٤هه)‏ من المرسل إلى المستقبل. 

وينضوي بروتوکول الإنترنت (1۲ - امەماها۴ ٤٥٣6۲ا"])‏ تحت مجموعة بروتوکولات 
التحكم بالإرساJل/‏ برgتgكJg‏ lإiترiٽ‏ - (Transmission Control Protocol/ Internet Protocol‏ 
»۲٥/1۴(‏ وهي مجموعة بروتوكولات طورتها وزارة الدفاع الأمريكية؛ لإتاحة الاتصالات عبر 
الشبكات المختلفة الأنواع. 

ردت ا اتن ا ت فا فمن افر ا ر نتب وا فلت ادف 
طریقتین: 

ار اتفال العكي :اهاي ادف مم رر دة ار ت 52 (ê‏ 
15P(‏ - ٣#ل۷iه۴»‏ وهذه هي الطريقة المعتادة لدى مستخدمي أجهزة الكمبيوتر في المنزل . 

الثانية: الخط النخصص ¬١(‏ 1ا (edi cated‏ المتصلJ‏ بڊشڊكة مlkيã-Network (Local Area‏ 
(١۸اء‏ وهذه هي الطريقة المعتادة لدى المؤسسات والشركات الكبيرة التي قد يكون لها عقدة 
(#ل٥)خاصة‏ بها على الإنترنت» أوقد تكون متصلة بموفر خدمة الإنترنت (15). ومن الخطوط 
المخصصة خط (۲ ا٣۲‏ 71) ٦1‏ . 


ويتكون العمود الفقري للإنترنت (٤٥n†ernہ1 )the backbone of the‏ من خطوط اتصالات 
تقل انات رة عة ريط ال واخيزة الكسيرت المضفة ال تة وواكةة 
.computers‏ وعبر هذه الخطوط (انظر شكل 1-1)» تسري حركة البيانات بكميات كبيرة . 
وجدير بالذكر أن موفري خدمة الإنترنت الرئيسين هم الذين يمتلكون أكبر الشبكات التي تشکل 
u CONG‏ لنقل البيانات عبر العالم» وهذه الخطوط السريعة هي العمود 
الفقري للاإنترنت. 


(شكل 1-1) نمط أتصال الناس بالإنترنت 


من يتحكم فيها؟ 

ولا يُمکن لأي جهة أن تعطل الإنترنت على مستوى العالم بأكملهء؛ إذ ليس هنالك عقدة 
واحدة أوكمبيوتر واحد تكم بالإنترنت»› فقد ف عقدة واحدة أوأكثر دون تعريض الإنترنت 
بمجملها للخطرء ودون أن تتوقف الاتصالات عبرها. وبالمقابلء فإن مناطق العالم المختلفة تتفاوت 
في احتمال تعرض خدمة الإنترنت فيها للأعطال؛ إذ يضم العمود الفقري للإنترنت أعدادا متفاوتة 
من النقاط الفائضة (ءاہامم وااءمinters‏ edundantا)‏ في المناطق المختلفةء فإذا تعطل جزء ما 
من الإنترنت» فإنه يمكن إعادة توجيه المعلومات بسرعة عبر مسار آخر. و هذه الميزة 
الفائضية (yء‏ ”دك ںهه) وكلما زادت درجة الفائضية في مكان ما زادت موثوقية خدمة الإنترنت 


وما هی خدماتها ؟ 

وتي الإنترنت التي تمتد حاليا عبر أكثر من 170 دولة خدماتٍ عديدة منها البريد 
الإلكتروني (انة”"-ع) (انظر شكل 1-2)» ونقل الملفات باستخدام بروتوكول نقل الملفات ءاأ۴) 
»ransfer Protocol- FTP)‏ وخدمة تلنت (٤۱,6ه٣)‏ التي تتیح الوصول إلى أجهزة كمبيوتر بعيدة 
»)Remote Computer Access)‏ واللوحات الإخبارية (ءل2۲هط ١ااهااuط)»‏ ومجموعات الأخبار 
(مuه٣ووسهم)»‏ إضافة إلى الخدمة الأكثر أهميةء ألا وهي خدمة شبكة الويب العالمية 4ا٣ه»)‏ 
WWW (‏ -طWe‏ التي نمت بسرعة هائلة خلال التسعينيات (انظر شكل 1-3). 
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(شكل 1-3) خدمة شبكة الويب العالمية 
رق خر آالدية من لفات والرسائط لإيضال خمات الاشرتت» كر مخها: ١‏ 
الضوئية (ءءنامه ١٠#طا۴)‏ » وكوابل البث التلفزيوني television wires)‏ eاcab)‏ » إضافة إلى الأقمار 
NERE oN e ON E a‏ 


والمتاحف الافتر اضية(unsںuعوںuص‏ 4ه libraries‏ اvirtua)‏ ›» والألعاب (sەصھو)‏ » والشركکات 
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والأعمال الإلكترونية (ءعءءهاط-ه)» إضافة إلى التعاملات المالية عبر الإثترنت مہاا١ت).‏ 
monetary transactions)‏ 
ومن يمتلك هذه الشبكة؟ 

أما من يمتلك الإنترنت» فلابد وأن تعرف أنها حصيلة جهود وإسهامات مشتركة لعدد 
كبن من لطا امسات والمافه اى هم اتنا الحرمية وبرارده فى خا 
وصيانة وتحديث هذه الشبكة. وبناءَ عليه» لا يستطيع أي شخص أومؤسسة (حكومية أوغير 
حكومية) أن يدعي ملكية الإنترنت أويدعي السيطرة الكاملة عليها. 

وبالمقابل» تمارس شركات رائدة في قطاع تكنولوجيا المعلومات نفوذها عبر وضع 
معايير لابد للأنظمة (من أجهزة وبرمجيات) أن تتوافق معها. وإلى جانب ذلك» فقد بدأ العديد من 
الحكومات في سن قوانين خاصة بالإنترنت . 

ومن الهيئات والمنظمات التي تلعب دورا مهما في مجال الإنترنت: 

IETF (The Internet Engineering Task Force) Ã 

هيثة عالمية كبيرة تفتح باب الاشتراك فيها لجميع مصمّمي الشبكات. والدور الرئيس لهذه 

الا تقر الف ت ورك قالغال اة ي ف ر اما اهرك . 


IESG (The Internet Engineering Steering Group) A 
.1٤۴١ إضافة إلى مراجعة المعايير التي تضعها‎ ٠ 1۲۴ هيئة تقوم بإدارة نشاطات‎ 


W3C (The World Wide Web Consortium) A 
(. هيئة تشجُع تطوير المعايير المفتوحة للويب متل ) 1۳۷1 لغة النص المترابط‎ 


IAB (Internet Architecture Board) Ã 
1۸8 هيئة للاستشارات التكنولوجية تقدم استشاراتها وتوجيهاتها لمجم و عة۲۴ع1 › كما تحدد‎ 
. الهيكلية العامة للإنترنت وعمودها الفقري‎ 
ISOC (Internet Society) A 
جمعية متخصصة تضم في عضويتها مجموعة كيانات تشكل مجتمعة اقتصاد الإنترنت‎ 
(أفرادء وإدارات حكومية» وشركات» ومؤسسات» وهيئات غير ربحية). وتبدي هذه الجمعية‎ 
اها في السامات ر الممارمات اة بالت رت رى هة الضعة الي رف علي كن‎ 
. من 14۳8 و ٥50!اإلى تعزيز ورفع مستوى استخدام وتطوير وصيانة الإنترنت‎ 


ICANN (The Internet Corporation for Assigned Names and Numbers) Ã 
(Domain names). وأسماء المجالات‎ 1٥ مؤسسة غير ربحية تتولى إدارة عناوين‎ 


InterNIC (Internet Network Information Center) A 
. هيئة تتولى تخصيص أسماء المجالات‎ 
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ما معنی ۷۷۷سا 

كلكم يكتب ثلاث حروف في بداية كل عناوين المواقع التي يزورها على الإنترنت ألا 
وهي )٠»»(‏ وهذه الحروف هي اختصار لجملة ا6 ٥۲14 Wie‏ اواختصار ا ا۷6 أو۷3. 

عزيزي الطالب» الويب ط٠۷٠‏ أيضدًا ترمز أحيانا إلى شبكة تربط جميع أجهزة العالم» مما 
يتيح لجميع الأجهزة المربوطة مع بعضها البعض في الشبكة (الويب ط٠٠)‏ للإتصال ببعضهاء 
وهذه الأجهزة موصلة ببعضها عبر بروتوكول معتمد متعارف عليه في الشبكة طمس ألا 
وهو 1۲۲۴ والذي یرمز إلى اەعە†ه٣۴ ٣× s۴۲‏ rممر٣.‏ ولذلك نحن نكتب في بداية عنوان أي 
موقع نريد أن نزوره هذه الحروف سس۷٠//:م۲٠‏ ثم نكتب اسم الموقع وامتداده» فهذا السطر يعني 
أننا نريد زيارة والإطلاع على محتوى موقع معين موجود على شبكة ««» والذي نود الاتصال 
به عبر البروتوکول مااا. 

أما البروتوكول» فهوعبارة عن طريقة أساسية لابد منها لدخول المواقع. مع العلم أنه 
توجد أيضا بروتوكولات أخرى تهم أصحاب المواقع ويتم استخدامها وفق الهدف من زيارة 
الموقع. 


مقدمة إلى الويب 

يمتل الويب ۷٠١‏ كافة المحتويات التي يتم مشاركتها أووضعها أوالإطلاع عليها من 
خلال الإنترنت. 

نتا تضع وزارة التربية والتعليم أرقام جلوس طلاب الثانوية العامة على الإنترنت» 
ومن ثم» يمكنك من أي مكان الوصول إلى رقم جلوسك بمجرد حصولك على اتصال بالإنترنت. 

وهكذا المدرس» يمكنه وضع مقررات الدراسة والتدريبات والإمتحانات وغيرها من 
المواد على الموقع الخاص به»ء تم يقوم الطلاب بالوصول إليها بصورة سلسة وسهلة وسريعة. 

عزيزي الطالب» بإمكانك أن تتخيل وجود أي شئ على الإنترنت» ومن أي نوع» وبأي 
خجم. 

مرة أخرى نؤكد على أن شبكة الإنترنت هي عبارة عن مجموعة كبيرة من الأجهزة 
حول العالم مربوطة مع بعضها البعض» هذه الأجهزة اعتمد أصحابها بروتوکول ١۳۲۶‏ للاتصال 
ببعضهم البعض» ولكن بعض الأجهزة خصصها أصحابها ليضعوا عليها بيانات وملفات تستطيع 
الأجهزة الأخرى المربوطة بالشبكة استعراضهاء وهذه الأجهزة تسمى بالخوادم >»٠‏ وهي 
أجهزة كمبيوتر عادية لكن مواصفاتها تعتبر عالية ومتقدمة جدا. 

أما الأجهزة التي تقوم بتصفح البيانات الموجودة في أجهزة الخادم 5٠٠۷٠۲‏ فتسمى العميل 
مااع وأجهزة العميل حتى تتصفح البيانات الموجودة على الخوادم تحتاج إلى برنامج يسمى 
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المتصفح ١٠٠ام×ع‏ وهناك عدة أنواع من المتصفحات يعتبر أبرزها وأكثرها تباتا هوبرنامج 
nternet Explorer‏ التابع لشركة مایکروسوفت. 


وماذا عن العنوان الرقمي م[؟ 

کل خادم ۲٥۷م>‏ على شبكة الانترنت له عنوان رقمي یسمی هل۸ 1٥‏ اختصارا ل 
»1nternet Protocol‏ يتم ربطه باسم النطاق ال ا۲ل عبر وسيلة تسمى ك١‏ اختصارا ل 
Name system‏ omainد»‏ وبعد أن تجد الشبكة ۷۴58 العنوان المطلوب تقوم بالدخول إلى الخادم 
وإرسال البيانات المطلوبة إلى الجهاز العميل ٠٠نا‏ وتظهر له البيانات ضمن شاشة المتصفح 
(انظر شكل 1-4). 


4 ارو إا الحقحة الرتيعية لجات‎ ١ A iTrRIT DITE aî - Mr rial Imi Eepikiüî f AE 
Fë) E Ge Files Lol Hp 


OO WN EAU OROBEBE BODO 


FF Ars E] hate ffi racic Liq ar -ta pra fra ASTA LUIS apa? pidm=1 E? 81S EJs 


EB See Onli 


ليه | صمت | قيلت قات اردايه ٠١‏ دريو لاست ية فر 


ت فطل أن تولف 


Esas‏ : - افا ب قن 
E‏ لدم غ یب 
وات 


Miers of ©4 2. وسات مات‎ 


(شكل 1-4) وتظهر له البيانات ضمن شاشة المتصفح 
هذا هومبداً عمل الانترنت» نحن ما يهمنا هنا هوشيء واحد فقط» هوالخادم ۲ع۷٣م5»‏ 
فنحن بكوننا سنتعلم تصميم وتطوير مواقع الويب باستخدIم‏ ڊرnliج‏ ® Microsoft® Expressi01‏ 
٥‏ فنحن سنكون الطرف الخادم ضمن هذه الشبكة» حيث سنقوم بعمل مواقع وبرامج نعرضها 
على جهاز خادم حتى يستطيع العملاء (في أي مكان) تصفح هذه البيانات. 


مفدمه إلى HTML‏ 
والسؤال الذي أتمنى أن يكون قد دار بخلدك الآنء هوكيف يتم عرض البيانات عبر شاشة 


برنامج المتصفح؟ 
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وهنا اي دور لغة 1۳۷1 والتي تشير إلى الlختڦڀصlر «Language Hyper Text Markup‏ 
فهي المسئولة عن عرض البيانات على شكل صفحات في المتصفح أوالمستعرض» فلغة 1۲۷1 
هي عبارة عن مجموعة من الأوامر التي يفهمها المتصفح بطريقة خاصة ويحولها إلى صفحة 
بيانات يعرضها بشكل منسق وجميل للعميل. 

وهذه الأوامر تسمى ءوه٣‏ (الأوسمة) فنحن عندما نريد تعلم البرمجة بواسطة ا۳۳۷ إنما 
نقوم بحفظ هذه الأوسمة ءوة٠‏ ومعرفة وظيفة كل وسم » أي ما الناتج الذي سيظهر في المتصفح 
إذا كتبنا وسما معينا. يمتل الويب ط٠٠‏ كافة المحتويات التي يتم مشاركتها أووضعها أوالإطلاع 
عليها من خلال الإنترنت. 


تصفح كود ]1۲M1‏ 
وهوما يمكنك تطبيقه بالفعل باستخدام الخطوات الاتية: 
تأكد أنك داخل الصفحة المطلوبة داخل برنامج المتصفح ع 
اختر الأمر سا۷ من قائمة uceهك.‏ 
تظهر نافذة برنامج المفكرة هم٠٤٠١‏ (انظر شكل 1-5) تعرض الكود الخاص بها. 


E FX10D4H741102 1]. Hedrpa: 
Bl Edî Foret ie Helo 


E FE HTML FUELIS "FFI FDTD # 
HAL 4. Ol, 


"http: f fmm. wl . crqF TRF html4#s trî ct. dtd" 3 


slink href=" #_Seryi ces #Ontfen- 
us # Ont. css ?b=5512. 1000 ' 
re lm" stylesheet" fue li nk 
href=" #qgloba l1l, images # C55. a sp 
Ass EtID=H™ LOLS132B10314b= HE "o0" 
relm"s tylesheet" fmas cri p 
sFCm" Seyî ces j Ont Do. jars. LOOO" 
typeEm" temt, 1avaScri pt" 
larguage=" Javascript" 
href="; global, images # C55. 


1 ا 
href=" falobal#images#css. 15 F‏ 
asset dH ELLEEHEEHE 1G"‏ 


(شكل 1-5) نافذة برنامج المفكرة لةم6اه| 
فللی بالك لیس بالضرورة أن تستوعب أكواد وسطور الشاشة السابقة. إلا أننا نطمح إلى 
ذلك 

مقدمة إلى ط۲× 

وهوالتطور الطبيعي للغة .١۳١۷1‏ حيث تتميز بوجود تطورات كثيرة وحديثة ساعدت على 
رة تضم قزق والمفحات. 

فى صفحات ال ا"7× تكون بنفس الفكرة التى يتبعها معظم المبرمجين والمصممين 
راء فى الاخ راج من صفحات ۳١‏ لكن تكرن الاضاقة الرحيدة هي إضاقة مط الكرد التالى 
ليكون في أعلى كل صفحة: 
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<?xml version="1.0" encoding="UTF-8"?> 


مع الوضع في الاعتبار ألا يكون قبلها مسافات فار غة ٥6‏ هم٤٠۷۸‏ اى المسافات التى قد 


تصدر عن بعض المحررات اوبرامج ۴۳۲. 
ثم يتم تحديد نوع الصفحة والمصحح لها من خلال ال: 
الذى يعمل على إعلام برنامج المتصفح أن نوع هذه الصفحة 1۷× 
والذى يساعده على محاولة تصحيح بعض الأخطاء أثناء عرضها على الإنترنت ويوضح لمواقع 
التحقق من کود ۳۳۷1 أنه كود 11× اذا لم تأخذه تلقائيًا من الصفحة. لذا يجب ألا تخلوأى صفحة 
منها. 


هناك 3 أنواع للوظيفة 00٣۷۲‏ 

E aS E E aA AN EEN U ENE O 
الذى قد تضيفه لتغيير خواص معينة على كائن معين والتى تعتمد‎ 5۲۷1٤ نستخدم فیها ای كود مٿل‎ 
E a E E 


<!DOCTYPE HTML 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 


"DTD/XHTML1-strict.dtd"> 

© وهي الأكثر شيوعًا فى الاستخدام» وذلك لدعهما للكثير من الخيارات والتى قد تسهل عليك 

قلیلا متل «07۳۴٥‏ ع5۲۷ والذى يساعدك على تحدید خصائص كائن معين فى وقت العرض 
متٿل: 


<div style="color:#ff£9900"></div> 


<!DOCTYPE HTML 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"DTD/XHTML1-transitional.dtd"> 


© و ھور مختص بالإطار ات es‏ 2ا۴ (انظر الكود التالي): 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset/ /EN" 
"http: //www.w3.org/TR/HTML4/ frameset.dtd"> 
وبالتالي» سيكون لدينا القالب التالي (انظر الكود التالي):‎ 


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE HTML 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 


"DTD/XHTML1-strict.dtd"> 


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE HTML 
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PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"DTD/XHTML1-transitional.dtd"> 


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset/ /EN" 
"http: //www.w3.org/TR/HTML4/ frameset.dtd"> 


أما عملية رأس وتذييل الصفحات ١#اهه۴‏ & #۲هةه١‏ فهي تشبه تماما طريقة كتابة الكود في ا۲۷1٠‏ 
القديم وهويتكون من : 
<HTML>‏ 


<head> 
</head> 


<body> 
</body> 
</HTML> 


لكن مع تغيير طفيف يظهر من الكود التالي: 


<HTML xmlns="http: //www.w3.org/1999/XHTML" xml:lang="en" lang="en"> 
<head> 
</head> 


<body> 
</body> 
</HTML> 


مقدمة إلى وو 

الرمز كع يشير إلى المصطلح ا١٠5‏ ءارك مهةءءة٤.‏ وهي الصفحة التي يتم تسجيل خصائص 
التنسيق والإخراج لمحتوى صفحات الويب. بحيث توفر عليك الوقت بشكل كبير» فبدلاً من تطبيق 
التنسيقات على محتوى صفحات الويب بصورة متكررة» نقوم بتخزين هذه الخصائص في صفحة 
أنماط تنسيق موز عة كء» ونصمم كافة صفحات الويب بأن تقرأً هذه الخصائص منها مباشرة. 
لذلك» فالفكرة العامة من كدء» هي أنها طريقة جديدة لترتيب محتويات موقعك من نصوص 
وروابط ء)٣اا‏ وصور ء٠وة"1»‏ وكل ما تضعه في موقعك ويمكنك من تحدید مکان کل شئ 
بالتحديد كما أن نمط التنسيق ٠اراك‏ الذي تحدده في أعلى الصفحة سينطبق على كل محتويات 
الصفحة. 

فمثلا يمكنك تغير شكل كل الأكواد التلقائية في ا۲۷١‏ مثلا لواستخدمت ٠!ان)‏ وهو أكبر عنوان من 
العناوين في الحالة العادية سيظهر بالحجم والشكل المفروض كما يحدده المتصفح ولكن عن 
طريق صفحة خصائص التنسيق 5٠٠١٤‏ ءارك يمكنك تغير شكل العنوان ١اا‏ وإعطائه شكل 
وإطار ولون كما تريد» نفس الشئ مع العنوان رهه دهاع (انظر شكل 1-6). 


16 


STleShtrl_ai . Hzgail 
HE Eê Fat ew Hap 
.title= 
1 
font-size: lOpt; 
Ffont-Famî ly: tahocma; 
Font-#eîi ght: bold; color: #DDDDDG 
1 


. ti tlebrdiyr 
[ 


Ffont-size: lOpt; 
Font-Famîi Iw: tahcma; 
color: #OODDDD 

J 


.titlebodyten:t 
[ 


Font-size=: lOpt:; 


(شكل 1-6) نمط التنسيق ارا الذي تحدده في أعلى الصفحة سينطبق على كل محتويات الصفحة 


مقدمه إلى JavaScript‏ 


المتخصصون في برمجة وتطوير الويب معجبون جدا بهذه اللغة. وعلى الرغم من أن 


الاسم نفسه يوحي بأن هذه اللغة لها علاقة بلغة ۷ة العتيقةء وهذا ليس صحيحًاء وكلمة امأك قد 
توحي بأنها ليست لغة برمجة حقيقية كاملةء بل شيء أقل من ذلك» إلا أننا جميعَا لا يكاد يخلو 
عمل احترافي من أعمالنا المتناثرة على الويب من هذه اللغة الجميلة والمتقدمة. 


وسوف نتناول التعريف عنها من خلال سرد وشرح النقاط التالية: 

لغة مكمه[ كان اسمها في البداية امأا5م۷نا. 

اللغة طورت في شركة ممةءء٠١‏ لكي تكون لغة برمجة صفحات مواقع الويب فقط. 
اكتسبت اللغة سمعة سيئة بسبب التطبيق السيء لهاء لكن تحسن مستوى اللغة ولا زالت 
سمعتها تعاني من تاریخها. 

نعتقد بأن كل الكتب التي تتحدث عن لغة tماءكة۷هر‏ لم تعرضها بالشكل الأمثل ولا 
تصلح لمن يريد تعلم اللغة لأول مرة لأنها تحوي أخطاء كثيرة. 

حاولت شركة ءصءاءرءهاءMi‏ ١ل5‏ التعاون مع شركة ممهءءه١‏ لكي تجعلها لغة البرمجة 
المستخدمة في هحهءء٤ه١»‏ لكن لم ينجح الاتفاق بينهماء وغير اسم امااءsم۷نا‏ إلى 
5هل لأسباب غير معروفة. 

قائمت شركة مايكروسوفت بإنشاء محرك ١”اومع‏ خاص لها أسمته اماز وهو الذي 
يستخدم في نظام ws‏ لہا۷ ومتصفح إکسبلورر .Internet Exp|orer 1E‏ 

الكتير من الناس يظنون أن لغة tماءءر‏ تختلف عن امااكم۷ه[ لكنهما في الحقيقة 
متشابهتان لکن بأسماء مختلفة. 

حاولت ممءء٤ه"‏ تحويل لغة اماrءsەvهر‏ إلى مواصفات قياسية لكي لا تقوم 
مايكروسوفت بالسيطرة على اللغة والتحكم في سوق المتصفحات» وأصبح لدينا 
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مواصفات قياسية لهذه الغ تJaı ECMAScript‏ . 
۾ لغة tمااءكمvهر‏ لا تستخدم في المتصفحات فقط لكن في العديد من البرامج والخوادم 


.Servers 


مقدمة إلى × 

عزيزي الطالب» وأنت في أول الطريق» ولكي تفهم لغة ۷1× من الأفضل فهم فكرة 
تمييز البيانات. يقوم الناس بإنشاء المستندات منذ قرون وبسبب طول المدة يقومون بتمييز هذه 
المستندات. على سبيل المثال» يقوم مدرسو المدارس بوضع علامات في كل وقت. فهم يريدوا من 
الطلاب نقل فقرات وتوضيح جمل وتصحيح أخطاء إملائية وهكذا. 

يعد تمييز المستند هو الطريقة التي نقوم من خلالها بتعريف البنية والمعنى والمظهر 
الشكلي للمعلومات الواردة في المستند. 

فبدء من الورق المكتوب بين يديك» والكتاب الذي تقرأء والملخص الذي تذاكر فيه» تجد 
أن عملية تمييز نص أو فقرة أو موضوع ماء من أهم الإجراءات التي تتخذها وربما بشكل 
متناسق وموحد لكل نوعية معينة من البيانات. 

هكذا الأمر مع لغة ا۷1×. حيث تحتوي مستندات 1۳۷1 و ۷1× على بيانات محصورة بين 
علامات» وهذا هو وجه التشابه بين نهاية كل لغة. في ا۲۷٠‏ تقوم العلامات بتعريف مظهر 
البيانات وجوهرها - تتجه العناوين إلى هناء وتبدأً الفقرة من هناك»ء وهكذا في ا"١×»ء‏ تقوم 
العلامات بتعريف بنية البيانات ومعناها س ماهية البيانات. 

عند وصف بنية البيانات ومعناهاء فإنك تجعل عملية إعادة استخدام البيانات ممكنة بأي 
عدد من الطرق. على سبيل المثالء إذا كان لديك كتلة بيانات خاصة بالمبيعات وتم تعريف كل 
عنصر من عناصر الكتلة بوضوح» يمكنك تحميل فقط العناصر التي تحتاجها إلى تقرير المبيعات»› 
وتحميل عناصر أخرى إلى قاعدة بيانات المحاسبة. إليك طريقة أخرى» يمكنك استخدام نظام واحد 
لإنشاء البيانات وتمييزها بعلامات ا"× » ثم معالجة تلك البيانات بأي عدد من الأنظمة بغض 
النظر عن النظام الأساسي للأجهزة أو نظام التشغيل .وهذه القابلية للنقل هي التي جعلت ۷1× أحد 
التقنيات الأكثر انتشاراً لتبادل البيانات. 

عزيزي الطالب ومبرمج المستقبل؛ تذكر هذه الحقائق كلما شرعت في العمل: 

یتعذر استخدام ۸۲۷1 بدلا من 1× لکن» فإنه یمکن إدراج بیانات 1× في علامات ۲۲M1‏ 
وعرضها في صفحة ويب. 

ل ا قاض عي ماعا خر ما من العاامات رك فيا كا 
المستخدمين . 

ولكن»ء تسمح ۷1× بإنشاء أي علامة تحتاجها لوصف البيانات وبنيتها. على سبيل المثالء 
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افترض أنك تحتاج إلى تخزين معلومات ومشاركتها حول الحيوانات الأليفة. يمكن إنشاء رمز 
1×التالي: 


<?xml version="1.0"?> 
<CAT> 
<NAME>IzZzZy</NAME> 
<BREED>Siamese</BREED> 
<AGE>6</AGE> 


<ALTERED>yes</ALTERED> 

<DECLAWED>no< /DECLAWED> 

<LICENSE>IzZz138bod</LICENSE> 

<OWNER>Colin Wilcox</OWNER> 
</CAT> 


يمكن رؤية أن علامات ا»× تتيح معرفة نوع البيانات التي تراها بالضبط. على سبيل 
المثالء تعرف أن هذه بيانات حول قطةء ويمكنك بسهولة البحث عن اسم هذه القطة وعمرها 
وهكذا. تعتبر قدرة إنشاء العلامات التي تقوم بتعريف أي بنية بيانات تقريباً هو ما يجعل ا×× 
"قابلاً للامتداد. 

لكن لا تخلط بين العلامات في نموذج التعليمات البرمجية تلك مع العلامات في ملف 
على سبيل المثال» إذا قمت بلصق بنية ا“× تلك في ملف ا۲۷١‏ وعرض الملف في 
المستعرض» ستظهر النتائج كهذا: 


Otta Siamese 6 yes no 1I1zz138bod Colin Wilcox 


حيت يتجاهل المستعرض علامات 1“× ويعرض البيانات فقط. 
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الفلصل 


9 


...Expression® Web جnliربڊ واجھة‎ 


تخيل أن هذا البرنامج هو سيارة تقودهاء هذه السيارة لابد 
وأن تکون ملمًا بکل مکوناتها حتی تحسن قیادتها. 

على صغاف صفحات هذا الفصلء نتعرف سويًا على واجهة 
هذا البرنامج. 


يتناول هذا الفغصل الموضوعات التالية: 


۸ تشغیل البرنامج. ۴ 
نظرة عامة على واحهة البرنامج. 3 
نافذة تحرير الصفحات دعذوه0. 3 
ضبط إعدادات الصفحات. هھ 
حزء مهام قائمة المجلدات. 
حزء مهام الخصائص. E‏ 
حزء مهام صندوق الأدوات. 4 
حزء مهام البحث. 3 
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تشغيل البرنامج 
يتبع برنامج Microsoft Expressio¬® Web‏ نفس النهج الذي تتبعه بقية البرامج التي 
تعمل تحت مظلة نظام التشغيل ۶× sسه0ل" W۷‏ بصورة عامة. لذلك يمكنك اتباع الطرق التقليدية 


في تشغيل البرامج سواء باستخدام قائة 56K‏ (انظر شكل 2-1). 


1: 2 Fel ۶ j Pif Bacar 
0 (EP hetcest Kocgemeris 


i hir FigiiteE 
(ED tn nas Flay ur i ip ives 
3 او اا اا‎ iirc 
i Fy Meier aces 


3 Tr rrr HF 
[Gê Sm fani 


Flat arl Sailr rara 


: a I r il 
Aeud a A 
CE 
¥ 2 gH Spl 
ا ا‎ 
HI Fara # Aun 


(شکل 2-1) تشغیل برنامج Microsoft Expressi0^N© Web‏ باستخدام قائمة Start‏ 
يبدا البرنامج في العمل وإظهار شاشاته الافتتاحية (انظر شكل 2-2). وتظهر على كل 
جوانبه العديد من المكونات التي تساعدك علی إتمام أعمالك بصورة ممتازة. 
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hi A_1. Ek] ; MIirtsûTî Erp itil î FÎ 


Al ea SE: ESE | 


f aimeh Se etl, 
tlert CE sbgle tn map 


haat phan 


Vinal Hide O pla Fpilcaliorc” habe | S17 brin Salh | Sa x 430 HLL TI CZ 
بعد تشغيله للمرة الأولى‎ Microsoft E×مressi0‎ ^® Web (شكل 2-2) نافذة برنامج‎ 
إلا أنك لو كنت تقوم بتشغيل البرنامج لأول مرة»ء فلا تقلق لو ظهر لك مربع حوار صغير‎ 


leet ror A arê sd rik ek, 
ew amt 


FMal ii 


(شكل 2-3) مربع حوار صغير يطلب منك إدخال بياناتك 
وبعد أن تقوم بإدخالهاء سيظهر لك مربع حوار أخر (انظر شكل 2-4) يخبرك بأن 
البرنامج ليس هو محرر الويب الأفتراضي لديك» ويسألك عن تعيينه مسولا عن أعمال الويب 
لديك أم لا. 


MiTicart Epa ear ahi E rok ater pa efe Heh Tape HTH 
ar. Eg seu birka raha pair fa ak 


i Beem parlor tur chat han tat Lipman Wali 
ا‎ 
(شكل 2-4) يخبرك بأن البرنامج ليس هو محرر الويب الأفتراضي لديك‎ 
أما الخطوة قبل الأخيرةء فهي ظهور مربع حوار أخير (انظر شكل 2-5) يعرض عليك‎ 
خيارين لتحسين أعمالك التصميمية.‎ 
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TT fe rra] Eeprgemurn Waa 


Priuary prte 


Keep yur sytem nımniniy 

Û] Garmlzel a la prinêcaihy that belga dîre efu kam perl res 
Esprmer la carn cercer ma Fin ha! apa tack: rd sa rahas, arg ar 1m iar Fakira. 
[iyên] 


a Me aller kool iû soie raj kms ih it ral kn 


Make Expression Wok etter 
Î Shan ug bat ie Caê lamer Eagetlerae mgmavemed FHF 


Eker kh CT DHE hare hE bat iha jahrê, tien ap i, 
Faahaa you mie raat Feqet. Tha Ffreraicr iu urt jû FikraicÊt lı ha ıı Farad Miwbı, 


L1 


(شكل 2-5) البرنامج يعرض عليك خيارين لتحسين أعمالك التصميمية 


إظهار/إخفاء أجزاء ءم جم المهام بشاشة البرنامج 
ويمكن إخفاءها أو إغلهها بسهولة عن طريق أداة الإغلاق أ. أما إذا أردت إظهارها 
مرة أخرى فما عليك إلا متابعة الخطوات الآثية: 
1- تأكد من تشغيل البرنامج بصورة صحيحة. 
2۔ افتح قائمة وعصھ٣‏ kیھ ٣‏ (انظر شکل 2-6). 
ج چ ڪرم 


ار 


E 
Tag Prapartiaı 


55 Propels 


Lrpagt Takbhn 

El pr ae 
Bra a 
Eerie 
Lrparı 

El Teke 
Beka Sxrarra Lkirary 
Laka Saa ekl 
Cardinal Frraltirg 
Fred | 
Fr zî 
ا‎ 
Carp hairy 
Hgts 
CS3 Fapgtı 
Bed ‘irks | Brad 


(شکل 2-6( قائمة Task Panes‏ 
3- اختیار أو إبطال اختيار جزء المهام "ask Pane‏ المراد إظھارہ أو إخفاؤه. 


مکونات نافذة البرنامج 

نعود فنقول أن طWe Microsoft Expressi|0^®‏ لا يختلف من حيث الشكل والهيكل العام 
عن بقية الأدوات البرمجية أو منتجات مايكروسوفت وخاصة بيئة .×٤‏ ۷5 ا0ءهMir‏ والتي 
ربما تکون قد تعاملت معها من قبل. 


ولا مانع من أن نشير إلى بعض المكونات التقليدية مثل أشرطة الأدوات 2۲طاهه۲. حيث 
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يتمتع برنامج Expressio¬® Web‏ Microsoftبمجموعة‏ خاصة من أشرطة الأدوات كءاb2ا0ه‏ 
(انظر شكل 2-7) التي تتولى القيام بوظائفه وتحقيق إمكاناته وتنفيذ عملياته. وكما تعودت» ما 
هي إلا نقرة واحدة على الأداة المطلوبة ليتم تنفيذ العملية المطلوبة (إن كانت متاحة). 

بالإضافة إلى شريط المعلومات الذي يقبع أسفل نافذة البرنامج (انظر شكل 2-8). حيث 
يعرض عليك معلومات عن الوضع الحالي لبعض وظائف البرنامج» بالإضافة إلى نوع الملف 


الذى تستخدمه. 


. BFT 1U 
ا ا ف ب ا و‎ 


Ajj Feraaph r Tes Parî e Toi Hue 
EEN AS GE EFE Dr NAT 


ا“ : " (HE‏ 
(شكل 2-7) أشرطة الأدوات امه 


a... 


pl Hi mi Fs laik Hels Elli; eded Sen Eid HR iMAT Ci 


(شكل 2-8) معلومات عن الوضع الحالي لبعض وظائف البرنامج 
نافذة التحرير 
ويّقصد بها نافذة تحرير محتويات الصفحة أو الموقع الحالي. وهي أول ما يتم تنشيط 
اترم انظر فكل 229 واكاك ى قلق ها اة الت اها على اهار ن 
التبويب اسمه 'تصميم ٣‏ وأوم0"'. 


ETT 
(شكل 2-9) نافذة تحرير محتويات الصفحة الحالية‎ 

ضبط إعدادات الصفحة 

في واقع الأمرء نود التأكيد على أن لكل شئ داخJ‏ ڊرaliج Microsoft Expressi0^¬®‏ 
ا خصائصه التي يتيح لك البرنامج التحكم فيها. فمثلاء هناك إمكانية ضبط خصائص التنسيق› 
وخصائص الصفحات» وخصائص عناصر التحكم كاه٣ا"ه)»‏ وغيرها. 

وفي السطور التالية نخبرك بكيفية ضبط خصائص الصفحة التي تقوم بتصميمها الان : 
1- تأكد من تشغيل البرنامج بصورة صحيحة. 
2- تأكد من أنك داخل الصفحة المراد التعامل مع خصائصها. 


3- افتح قائمة ۴11۲ 
4۔ اختر الأمر یعنااعمہا٥‏ (انظر شکل 2-10). 
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(شكل 2-10) اختر الأمر PEDE‏ من قائمة ما۴ 
يظهر مربع الحوار وع1)إءمه۴۲ معه۴ (انظر شكل 2-11) يعرض عليك تبويبات واھ متعددة. 


ù 


Page Properties رly>Ûl‎ gبرم‎ (2-11 (شكل‎ 


5- يتضمن هذا المربع التبويبات الآتية: 


Ã 


Ã 


1ءnم6:‏ لإدخال الوظائف العامة للصفحة مثل عنوانهاء والتجاه الافتراضي لمحتوياتهاء والتأثير 
الصوتي المصاحب لهاء وغيرها. 

attingص۴0۲:‏ اتحديد خصائص التنسيق الخاصة بهذه الصفحة (انظر شكل 2-12). حيث يمكنك 
تحديد ألوان كل عنصر من عناصر الصفحة مثل الأرتباطات وعإم1[» وغيرها. 


س م 
Garmial FrrmmHirg | fatiamçad | Ciyutiiri | Larrjirga‏ 


Ethie 
ElEackgrared peine] 

a 
Calm 
Bathyrod i e ت‎ 
Tek: LE bke katoi: Û hie  & 


tile mili Î meti: ت‎ 


Hgeerad hiparirk: | I takes: ت‎ 
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(شكل 2-12) التبویب وہ۴21 بمرڊع |Ûئحlر Page Properties‏ 
‘Advanced Ã‏ وهي مجمو عة من الخيارات المتقدمة التي تحدد فیها هوامش الصفحة (انظر شکل 13- 
0 


ی 
Garmin | Ferrall #Ftamecad | Ciyutiiri | Larejirğa‏ 


Hergê 
E 


kalt arginı 
Bo ein - 
Hight Hangin: 


a 


Page Properties رlحÛl بمرڊع‎ Advanced (شكل 2-13) التبويب‎ 


ھۂ m۳‏ t)0یںCu€:‏ لتحدید بعض متغیرات النظام بحيث تتواءم الصفحة مع أي متغیرات تطراأً عليها أثناء 
٤‏ تصفحها. 
:Language Ã‏ لتحديد بعض الخصائص الحيوية للصفحة مثل اللغة المستخدمة فيهاء ووالتكويد 


المستخدم gماdمء"۴؛‏ وغيرهما. 


التبويب طج1 يعني أن يتم تقسيم مربع الحوار ×80 عه[ه1( إلى أقسام فرعية. 
کل قسم يتضمن مجمو عة متناسقة من الوظائف والعمليات. 


جزء مهام قائمة المجلدات 

عزيزي الطالب» أَيّا كان استخدامك للكمبيوترء وأيّا كانت البرامج التي تعمل عليهاء فهي 
تعمل ضمن مجلدات ١۲٠لاه۴.‏ وهذا الجزء يعرض عليك ليس فقط المجلدات» ولكن أيضًا 
محتویاتها (انظر شکل 2-14). 

الأمر الذي يسهل عليك التعامل مع محتويات الموع أو الصفحة التي تعمل بها. 


Aj rel + arka 


CF TER al STE Ea 
E raê 
متم ا‎ 
O meger 


e] DCs n 
A Sal 
A sh 
2 
e E ET 


نه اق 


Tanai 000 Axl 
(شكل 2-14) يعرض عليك هذا الجزء ليس فقط المجلداتء ولكن أيضًا محتوياتها‎ 
جڑء مهام الخصائصضص‎ 
عزيزي الطالب» أَيّا كانت البرامج التي تعمل عليها في تصميم وتطوير الويب» وأيّا كانت‎ 
العناصر التي تقوم بإنشاءهاء فلابد وأن تعلم أن لکل عنصر اه۲"ه أو مكون ان۴ أو شئ‎ 
خر خصائص معينة قد تختلف أو تتشابه مع مكونات أخرى. ولابد وأن تتيح لك أداة تصميم‎ 
Microsoft Expressi0(¬® ali) وتطوير الويب التي تستخدمها هذه الإمكانية. وهذا ما يفعله‎ 
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من خلال جز ء الخصائص e5اا‏ مم٥۴‏ (انظر شکل 2-15). 


(شكل 2-15) جزء الخصائتص !6م۲0 
وكما ترى» فإن هذا الجزء يتضمن تبويبين. الأول (راجع شكل 2-15) يتضمن خصائص 
الوسم و۵٦‏ سواء کانت خاصة بسمات المحتوی tes‏ ں٣۸‏ أو خصائص الأحداث کا٣ Eve‏ 
المترتبة على التعامل مع بعض محتويات الصفحة (انظر شكل 2-16). 


(شکل 2-16) سمات المحتوی عا ں ط٤۸‏ أو خصائص الأحداث ا٥۴۷‏ 
إلا أن التبويب الثاني يتضمن تحديد خصائص التنسيق وفق صفحات C55‏ (انظر شكل 
2-17). 
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(شكل 2-17) تحديد خصانص التنسيق وفق صفحات 5ئ 
جڑء مهام صندوق الأدوات 
عزيزي الطالب» آَيًا كانت البرامج التي تعمل عليها في تصميم وتطوير الويب» وأَيًّا كانت 
العقاصر التي تقوم بإنشاءهاء فلايد وأن قطم أن هناك من الاذوات ما لا يمكن الأستغاء عها في 
إطار هذا العمل. ولابد وأن تتيح لك أداة تصميم وتطوير الويب التي تستخدمها هذه الأدوات» إلا 
نها تختلف في حرفيتها من أداة لأخرى. وهذا ما يع ڊرaliج Microsoft Expression® Web‏ 
من خلال جزء صندوق الأدوات ×٥طا٥ه۲‏ (انظر شکل 2-18). 


pier " 


U rise 
ÛÎ hii Frere 
Tiere 


I Frya 


=1 Fren Com beh 
Î iene iye 
EY Praia E تي‎ 


(شكل 2-18) جزء مهام صندوق الأدوات ×0طا0ه1 
وكما ترى» فإن هذا الجزء يتضمن تبويبًا واحدًا ولكنه يتضمن أكثر من قسم (انظر شكل 
2-9). 
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(شکل 2-19) جزء مهام صندوق الأدوات ×٥ط۵۱٥٣‏ يتضمن أكثر من قسم 
هذه الأقسام ھی: 


HTML 

Tags 

Form Controls 
Asp .NET Controls 


جزء مهام البحث 

عزيزي الطالب» وماذا بعد أن تكثر أعمالك» وتكثر صفحاتك والمكونات التي تعمل بها. 
ليس من الأشياء المهمة أن تتيح لك أداة تصميم وتطوير الويب التي تستخدمها إمكانية البحث عن 
کود» أو سطر» أو أي شئ أخر لا تعرف مكانه؟ إن هذا بالفعل ما يقوم به برنامج اMicros0۴‏ 
Expression ® Web‏ من خلال جز ء مھام البحث ۴٣۵‏ (انظر شکل 2-20). 


pn pn pn pn 


رور و ا 


F > Fu ” lire ” Flairherd Taxt 


| 


RL ALirh: Om rh Appecei: Alon SHI btn Fketdad 


(شكل 2-20) جزء مهام البحث ۴٣١‏ 
وكما ترى» فإن البرنامج يساعدك على إجراء عمليتي بحث في نفس الوقت (انظر شكل 
2-1(. 
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hy ol True hu Yl 
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ESLE a lL 


س 


Cala Sgn Catal 
rara Frain] 
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(شكل 2-21) ب اوس بت بی 
أما عن مربع حوار البحث والاستبدال ععهاممR‏ ١ه‏ ١ا۴‏ (انظر شكل 2-22)» فحدث 
ولا حرج حيث يتيح لك البحث بصورة احترافية كبيرة» بل واختيار إظهار النتائج في أي من 
مربعي الحوار المختارين. 


| 
rat) caın CIMatck digrin 
CIFHekEh itis 
O Sahctad papal] TItgrois hkaıraca dihrinraar TC IPHatch ahe targa 
a irak pêg COE epee 
Cigplay ramıbrin: ae IF 
FA 
Girmdz 


= | 


(شكل 2-22( مربع حوار البحث JlyٺتبدJI Find and Replace‏ 


30 


أساسيات مواقع الويب 


لكل شن أساسياته» وبما أنك تهدف إلى إنشاء صفحات 
ومواقع ويب» فلم لا نتناول أساسيات مواقع الويب» وكيفية 


التعامل معها. 
على ضغاف صفحات هذا الفصل» نتعرف سويًا على 
أساسيات مواقع الويب. 


يتناول هذا الفصل الموضوعات التالية: 
االو ال 

ما المقصود بموقع ويب. 
مكونات موقع الويب. 

ما قبل إنشاء موقع ويب. 


pn pn pn 


pn 


E 
3 
7 
4 
h 
E! 
3 
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ما المقصود بال "ويب" 

ظهر الويب إلي الوجود فى عام 1991 على يد اتيم برنرز لي" الفيزيائي البريطاني الذي 
كان يعمل فى أحد المختبرات الأوروبية. وكان هذا العالم يبحث عن طريقة فعالة تساعده وزملائه 
من علماء المختبر على مشاركة أفكارهم. 

وكان النظام الذي ابتكره 'برنرز لي" يعتمد على إمكانية وجود إشارات ك)اة"٣‏ )800 في 
كل مستند إلكتروني لتشير إلى مستندات أخري» تلك الإشارات اصطلح فيما بعد على تسميتها 
روابط ءk”ااممر٣‏ أوءk‏ ناء وبالتالي يستطيع أي شخص ممن لهم الحق استعراض تلك 
المستندات التنقل مباشرة من مستند إلي آخر طالما أن هناك روابط تشير من مستند إلي آخرء 
ولعلك تري أن كل ما ذكرناه هنا شئ بديهي وطبيعي جدا خصوصصًا إذا كنت تتعامل مع الويب 
بشكل دوري إلا أن الخطوة التي قام بها تيم برنرز لي" كانت خطوة ثورية فى تاريخ شبكة 
الإنترنت والتعامل الشبكي مع المحتويات المختلفة. 

وخلال السنتين الأولي والثانية من عمر النظام الجديد كان العلماء والباحثون هما الذين 
يستخدمون الويب على نطاق ضيق» أما في بداية عام 1993 فقد كان هناك نحو 50 خادم للويب 
e‏ ط6 بعد ذلك وفي شهر نوفمبر من نفس العام ظهر أول مستعرض للويب يدعم إمكانية 
عرض الوسائط المتعددة iaلع"‏ ااا ۷ء وقام بإعداده مجموعة من المبرمجين ء۲عمهام۷ه0 بمركز 
تطبيقات السوبر كمبيوتر ١٥5۸‏ فى الولايات المتحدة الأمريكية وسُمي أهءه×. 

ولأن مستعرض الويب اه" كان برنامجًا مجانيًاء فبعد مرور أقل من ستة شهور فقط 
على إصداره وصل عدد مستخدميه إلى 2 مليون مستخدم» وكان لمستعرض الويب عأھsهM‏ 
الفضل فى زيادة شعبية الويب فلقد زاد عدد مستخدمي الويب بنسبة 360 ألف بالمائة فى عام 
3 وحده» وبعد ذلك بفترة قصيرة أصبح الويب ثاني أشهر خدمة من خدمات شبكة إنترنت 
(بعد البريد الإلكتروني). 


: بامكانك الآن إدراج أي نوع من أنواع البيانات سواء كانت تابتة عاه†S‏ 
أوتفاعلية >نصهم ر( داخل صفحة الويب. 


ستتعلم لاحقا كيفية التعامل مع هذه المحتويات وكيفية إدراجها بالصفحات التي 


extاآ»‏ والرسوم عDrawin»‏ والصور sءعaص]»‏ والصوت Sound‏ 


ل الوسائط المتعددة وزل ع1 ان" تعني أنواعًا كثيرة من البيانات مثل النصوص 
۳ 
والفيديرهع‌ل]1 ۰۷ وغيرها من انواع البيانات (المحتوى). 
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أهمية الويب 
هناك بعض العوامل التي جعلت من الويب وسيلة أساسية لنشر المعلومات فى هذا العصر 
وجعلنا نهتم باستعراض مواقعه ونفكر فى تعلم كيفية إنشاء تلك المواقع. فيما يلي شرح لبعض 
هذه العوامل: 
¿ الويب حذاب وسهل الاستخدام 
من أهم المميزات التى يوفرها الويب دعمه للوسائط المتعددة» أي أنه يوفر إمكانية عرض 
الألوان والصور والتسجيلات الصوتية ولقطات الفيديو» والذي ساعد على ذلك ظهور 
مستعرضات الویب ء۲عوسه8۲ ط٥۷6‏ التى تدعم عناصر الوسائط المتعددة Internet ş Mosaic Jn‏ 
Netscape gy Explorer‏ و Opera‏ وغیرها. 
ناهيك عن سهولة التعامل مع مستعرضات الويب بقليل من التدريب خصوصدًا وأن تلك 
المستعرضات قد استفادت من واجهات العمل الرسومية التى توفرها أنظمة التشغيل حاليًا. 
¿ الويب من السهل إنشاء مواقعه 
من الأمور الهامة التي شجعت الكثيرين على إنشاء مواقع الويب سهولة إنشاء تلك 
المواقع» فعندما قام 'تيم برنرز لي" بابتكار الويب بني فكرته حول إنشاء صفحات الويب حول لغة 
Hypertext Markup Language HTML‏ والتي تعتبر لغة سهلة التعلم والتطبيق ولا تتطلب 
دراية عميقة بالبرمجة بمعناها المعروف. 
بخلاف ذلك وإذا كنت تري أن لغة ٨117١۷1‏ صعبة الاستخدام يمكنك استخدام العديد من 
البرامج التي توفر لك إمكانية تصميم صفحات الويب بحيث أن ما تراه (انظر شكل 3-1) هوما 
ا 3 


HH ao iE Ti, î Û Sa Fir IEE ATi FEL Dua iia ri iH riij , MITT Eo... 
Pm El Haw [ram Fg Tol Tah Sk Cava Tak Pn rir Ha [EECTIFES 
A] Femgeph + Cela rat! > elait am E EE aS = 38 
جیه و کے‎ FEL چ چ‎ alu hol 


tt rmreemergenepreranei PT if. 
iS ree 
LC pirs 
j eger 
I As fa 
A ssl mt 


سا هذ أرل سق أقوم مها باستطدام براق 
Expresalon Wak |‏ 


EE Se 
1 2 Fae | 
کی‎ | pee” | 
El j sial Sa Teri... 


Ll 
عر ذال‎ 
ب‎ eker CS riye û apa 


E er 
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(شكل 3-1) المحتوى أثناء إدخاله 
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تیان 


یرو اتات 


(شكل 3-2) المحتوی بعد نشره 

مما يعني أن عملية تصميم الصفحة فى هذه الحالة لن تختلف كثيرَا عن تصميم أي مستند 
من خلال برنامج من برامج تنسيق النصوص» ولا يتطلب هذا الأسلوب أن تكون لك معرفة بلغة 
1ء ومن أشهر هذه النوعية من البرمجيات والادوات وڊرaliج Microsoft Expressi0^¬®‏ 
.Web‏ 

أ۸ الويب متجدد وممتد 

الويب ليس مجرد صفحات جميلة مزينة بالألوان والصور ولكن الويب كنز ثمين من 
المعلومات» وأهم ما يميز تلك المعلومات أنها متجددة باستمرار فأغلب مواقع الويب تتجدد 
محتوياتها بشكل دوري لتعرض لك معلومات جديدة وبالتالي ستجد أن مواقع الويب لا تقتصر 
زيارتها على مرة واحدة فقط طالما أنك ستجد فى كل زيارة شيتًا جديداء وفى نفس الوقت عملية 
تحديث مواقع الويب نفسها عملية بسيطة وغير مكلفة بالنظر إلى وسائل النشر التقليدية الأخري› 
فإذا أردنا متلا تحديث محتويات هذه المادة التعليمية وإصدار طبعة جديدة منها سنجد أن العملية 
تتطلب إعادة تصميم الكتاب وطباعته مرة أخرى» كما أن السادة الطلاب والمدرسون سيضطرون 
إلي شراء الطبعة الجديدة» وستصبح الطبعة القديمة غير مفيدة» فضلا عن أن عملية التصميم 
والطباعة والتوزيع تستغرق وقتا طويلا. كما سيضطر قارئ الكتاب إلي الانتظار حتي يحصل 
على نسخته الجديدة» بينما فى حالة الويب سيتمكن زوار الموقع من استعراض المعلومات الجديدة 
بمجرد انتهاء عملية التحديث التي لا تستغرق فى أغلب الأحيان سوى بضع دقائق. 

¿ التوازي والتسلسل في عرض محتويات الويب 

من ناحية آخري فإن الويب يوفر لزواره إمكانية الحصول على المعلومات بطريقة متسلسة 
ومتوازية فى نفس الوقت بينما لا تستطيع وسائل النشر التقليدية الأخري عرض المعلومات إلا 
بطريقة متسلسلة فقطء انظر متلا إلى الصفحة التي تقرأها حاليا من هذا الكتاب وستجد أن الطريقة 
الوحيدة لقراءتها أن تبداً القراءة بالترتيب من بداية الصفحة إلى نهايتها ويمكنك إتباع نفس 
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الطريقة فى قراءة صفحات الويب إضافة إلي أن صفحات الويب توفر بعدا جديدا للقراءة يتمثل 
فى وجود الروابط ءا الموجودة فى هذه الصفحات» تلك الروابط عادة ما توفر لك إمكانية 
الوصول مباشرة إلي صفحات أومعلومات أخري ذات صلة بمحتويات الصفحة التي تقرأها حاليًا. 
أ الويب متعدد الأنظمة ومتعدد الخدمات 
الويب شأنه شأن سائر خدمات شبكة إنترنت الأخري لا يعتمد على أنظمة التشغيل التى 
تعمل عليها الأجهزة التي يستخدمها زوار مواقعهء وبالتالي إذا كنت تقوم بإنشاء موقعك على 
جهاز يعمل بنظام 2000 ۷"۷ على سيبل المثال سيستطيع من لديهم أجهزة تعمل بنظام 
Windows Me‏ و Windows XP‏ أو UNIX‏ أوMacintosh‏ أوغيرها من أتطمة التشغيل الأخري 
استعراض موقعك ومطالعة محتوياته بشرط أن تكون تلك الأجهزة لديها اتصال بشبكة إنترنت 
ومثبت عليها أي مستعرض لصفحات الويب مٿل Internet Ex»p|‌ore‏ و Netscape‏ أوغیرهاء ولا 
شك فى أن هذه الميزة شجعت كيرا من ازدهار الويب كوسيلة لنشر المعلومات لأن مصمم مواقع 
الويب سيقوم بإعداد الموقع مرة واحدة فقط وسيصبح بإمكان جميع رواد الويب استعراض موقعه. 
أ¿ خدمات الويب ليست فقط عرض بيانات 
وهي أن مستعرضات الویب 8٥We‏ ط۷6 یمکن استخدامها لیس فقط فى استعراض 
مواقع الويب ولكن يمكن استخدامها أيضا في الوصول إلي الكثير من الخدمات والموارد على 
شبكة إنترنت» حيث بإمكانك تضمين الصفحات التي تقوم بإنشائها روابط تشير إلى مواقع خدمة 
'جوفر" ۲م60 أوابروتوکول نقل الملفات" ۴۳۴ أومجموعة من 'مجموعات الأخبار 
r‏ وه" أوعنوان بريد إلكتروني أوحتى ملف من الملفات التي قد تكون صورة أولقطة 
فيديوأوبرنامج» وكل ذلك جعل من الويب الخدمة الأكثر جاذبية بالنسبة لمستخدمي شبكة إنترنت. 
۸ مرة أخرى نؤكد. خدمات الويب ليست حكرًا على أحد 
رغم المزايا العديدة التى يتمتع بها الويب تبقي الميزة الأساسية للويب كونه مفتوح 
للجميع» فالويب ليس مملوكا لأحد» ولا توجد جهة تحدد من يمكنه أن يكون له موقع ومن لا يمكنه 
ذلك» ولا توجد جهة تتحكم فى نوعية المعلومات المنشورة على الويب» فإى شخص بإمكانه إنشاء 
موقع على الويب وأى شخص بإمكانه استعراض مواقع الويب بصرف النظر عن موقعه 
الجغرافي»ء أصوله العرقيةء توجهاته» هواياتهء اهتماماته. 


مكونات الويب 
جميع مواقع الويب يجب أن تحتوي على بعض أوكل أنواع البيانات المتاحة. فحتمًا لابد 
من وجود نصوص أوصور على الأقل بصفحات هذا هذا الموقع (انظر شكل 3-3). 
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ابد - اجرخم الرسيي المترل ١١‏ جن 
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ف جتنا جرت اليم -والشت زى El‏ کل ات 1-7 ۳ کل قوع آنا ت 
شفع قول ھی سطور و 


ن تهنف عسي اللي محف اللي قي اللي لسري جقضرق الط 

شن لال تقبيم راسج ابرانية فظجيية للتفارمل وغراكر القدري ةو 
الظطلاب و الجي تاشم قي علاع الركةة الذشي, المي تعمل على طهر تسية 
شدرات الطلاب وة كاعة وقحرت الل البشرت بضورة عاهة كات عفيد 
| شه [إحنق براسجها وها بقلم الريابات اقنشية وطبيقه داخل المدلكة 


الضربية النعوتبة وجفهيرية عضر العرببة وقذت يهل على ية جحجم رة 
E 0‏ 


١‏ الفقل البترة بلسحخدام طرا تدريبية تقاعلبة با داح الاد اللي 


۾ ميطتفل يراعج الحتبد صن الأساقيب ية الدن. تمق ققترات الحقلية ي 
الطيح الأخزف حي إن التمرين الشقتف للل عن طريق الرياقيات النشنية 
يتيب تطير طتافل للعقل زيقسل انجر قخامل تما أنه ينمي قرات عقية بالسبير AA‏ 
TLL GERINE FELLER I ENE ELIM | E‏ ا کے 


اڪ 
(شكل 3-3) لابد من وجود نصوص أوصور على الأقل بصفحات هذا هذا الموقع 
ويمكننا تلخيص تلك العناصر فى الآتي: 
¡ النصوص 
النصوص هي العنصر الأساسي لتكوين محتويات مواقع الويب. ومع البدايات الأولي 
للويب كانت مواقع الويب تعتمد على النصوص بشكل أساسي» ذلك لأن مستعرضات الويب التي 
كانت موجودة وقتها لم يكن بإمكانها أنواع أخرى من المحتويات (انظر شكل 3-4). 
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(شكل 3-4) النصوص هي العنصر الأساسي لتكوين محتويات مواقع الويب 

وعندما تقوم بإعداد موقعك على الويب ستجد أنه بإمكانك تنسيق النصوص كما هي الحال 
فى تنسيق المستندات التقليدية التي تنتجها بواسطة W0۲4‏ اfمءهrءMi»‏ إذ بإمكانك استخدام خطوط 
ئ۴6 مختلفة وبإمكانك جعل النص أسود عريض 4ا٥8‏ أومائل ااه[ ويمكنك تحديد محاذاة 
النص وغيرها من العمليات العادية فى تنسيق النلصوص. 

۸ الصوركموة"1 

عملا بالمقولة الصينية الشهيرة ' ربما تساوي صورة» ألف كلمة'٠‏ ووفقا لتطور الويب 
وقدرة متصفحات الويب كا#ء۷٠إ8‏ ط۷۷6 على التعرف على وقراءة أنواع أخرى من البيانات» 
أصبحت الصور عنصرًا أساسيًا فى مواقع الويب» وعادة ما تكون الصور الموجودة فى صفحات 
الويب بإحدي النوعين التاليتين 61۴ أو[ (انظر شكل 3-5). 


3 !: العو قح الر صمي لفقول ١ء! الحاعة الر ية‎ - rra iE Explor 
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(شكل 3-5) عادة ما تكون الصور الموجودة فى صفحات الويب بإحدي النوعين التاليتين 61۴ أويم[ 
وتتميز هاتان الصيغتان بأن الصور التي يتم حفظها بها تكون بحجم صغير من ناحية 
المساحة التخزينية وبالتالي تستغرق تلك الصور فترة أقل عند تحميلها من قبل مستعرض الويب. 
هناك العديد من البرامج التى يمكنك من خلالها إعداد الصور التى ستضعها فى 
صفحات موقعك Paint Shop Pros Adobe Photoshop Jia‏ وغيرھما. 


ِ Links طılgjJl‎ A 
الروابط ءذا تمثل الفكرة الأصلية التي قام عليها الويب- كما ذكرنا سابقا- وبالتالي‎ 
توفر الروابط ءk ”أا وسيلة أساسية لاستعراض مواقع وصفحات الويب ولا تكاد صفحة من‎ 
صفحات الويب تخلومن الروابط. والروابط يمكن أن تنقلك إلى جزء آخر داخل نفس الصفحة أو‎ 

إلى صفحة أخري داخل نفس الموقع أوقد تنقلك إلى موقع أخر (انظر شكل 3-6). 
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(شكل 3-6) الروابط قد تنقلك إلى جزء آخر داخل نفس الصفحة أو إلى صفحة أخري داخل نفس الموقع 


Tables Jalدجلl‎ Ã 
تستخدم الجداول أساسًا فى صفحات الويب الاستخدام التقليدي لها كوسيلة لتنظيم البيانات‎ 


فى شكل منسق ومتكامل (انظر شكل 3-7). إلا أن للجداول ميزة مهمة أخرى فهي توفر لك 
بالإضافة إلى تنظيم المعلومات وسيلة ممتازة لإنشاء تصميمات معقدة لصفحات الويب. 
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(شكل 3-7) تستخدم الجداول فى الويب كوسيلة لتنظيم البيانات فى شكل منسق ومتكامل 


Frames تٽlرlط¦طإJl‎ Ai 
الإطارات ١۳ه۴۲ هى طريقة من طرق تصميم صفحات الويب وتعتمد على تقسيم نافذة‎ 
ويعرض‎ ۴۲۵۳٣۵ مستعرض الويب إلى عدد من الأقسام (انظر شكل 3-8)» كل قسم يسمي إطار‎ 
صفحات أو أنواع مختلفة من البيانات. وعندما يتم عرض صفحة جديدة فى أي من تلك الأقسام‎ 
.)3-9 (الإطارات) تبقي باقي الإطارات دون أي تغيير (انظر شكل‎ 
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ماششي المعانة جراجة اريت العرد اسط ا ررقت 
ا اشرت عاس ییا 
أي إطار العلاتات لرفية نسب منتكينا 
|| ترشا یوم سيار 3 ونی ع شعیرء 
| الشريئي ي لسلا لتد اك العدلام 
ہلل اة فی مارت نولي ونیا کب از 
كر للم يمتاسبة اثر ن لاعت 
ا ور اند وقای آشر لاء بين الستتطيبخ 
اتخږې پافتادال السليي قي ماو عام ۰۵ ٨۰‏ لي اتان فتولې فتن ساق سسا سین | ا 


ا 


(شكل 3-8) تقسيم نافذة مستعرض الويب إلى عدد من الأقسام 


Help 
ع 2 7 ق‎ EN RHE FF 


mg algca uri tails {erka Hati, ap 


انياشت وباضبة 

اراي الثفر 
الوس تلن طرطاع. أي رة قفر 

جال لیل 

g_ekrll hotell, rami 1‏ 
* اتسرام بين لاقي ,رعق صر اغ أرتي ذا مذ ليور لانيف لي مطل اقرف الداضشي , 
ا فسر ا سیت ول قز لشي کن یشید لتا أ ظا ين اتتين- عالسر اج سرت دشا 
ار شارت القشن نې لي شېه مې لي حجان دت اتترا رغه متا اد۱25 طرق کبیر 
ا دجت اسای و فريس و العامة اسا یون سن سو أطي ویہئس مر زس انپدون ل قنسلم.. 
ا کرس ای اقام مت حل شین تون ۱١‏ 
اق داعني واتزعة قايا نة ملا زاء القن يلها مسكتر في كل شيم ن عقا وکر : 
املوب لان اشاق يرلا جرم ويطك ليطولات ندا تدرا الشرام قي سرع لر لطن ۹ 


(شکل 3-9) تبقي باقي الإطارات دون أي تغيير 
¿ النماذج Forms‏ 
النماذج ۴٠۲۳١‏ هي أجزاء من صفحات الويب الهدف منها تجميع بيانات من زائري 
موقع الويب» ومن خلال النموذج يقوم زائر الصفحة بالإجابة على بعض الأسئلة أو كتابة 
المطلوب من البيانات (انظر شكل 3-10)» وبعد ذلك يقوم النموذج بإرسال البيانات التي تم 
إدخالها إلى جزء خاص داخل موقع الويب» وتستخدم النماذج عادة فى عمليات الاشتراك داخل 
موقع ما أوإيداء الرأي أوطلب معلومات إضافية وما إلي ذلك. 
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Eke EE ew Feroles. Til Hap 
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ther qURTIES 


Ea bur hull herma hara 


pour tarmp inp Hame hain 
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(شكل 3-10) نماذج إبداء الرأي في أحد المواقع 
أ¿ الوسانط المتعددة Multi media‏ 
عناصر الوسائط المتعددة هاله اا" من تسجيلات صوتية أو لقطات فيديو (انظر شكل 
3-1))» أو بث حى مباشر أصبحت أيضًا من العناصر الشائعة فى مواقع الويب» وأصبحت تمثل 
عاملا قوية من عوامل الجذب» وهناك العديد من مواقع الويب خصوصًا مواقع محطات الإذاعة 
والتليفزيون التي تقدم على مواقعها تسجيلات من برامجها وأحيانا تقدم بثا حيًا مباشرا لإرسالها 
من خلال الموقع (انظر شكل 3-12). 
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(شكل 3-12) موقع البث المباشر لإذاعة القرآن الكريم المصرية 


أ عناصر أخري 

العديد من مواقع الويب تحتوي على بعض العناصر الأخري مثل برامج '"جافا 3۷2[" و 
'جافا سکریبت اماا»5ة۷ه["» وبرامج ٥61‏ وعناصر ها۴ وكلها أدوات تضيف إمكانيات محسنة 
لمواقع الويب وتستخدم فى العديد من الخدمات الموجودة فى تلك المواقع متل البحث عن 
المعلومات على الويب والاتصال بقواعد البيانات وبرامج التدريب عن بعد وما إلى ذلك. 
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ما قبل إنشاء موقع ويب 

في واقع الأمر» ما أسهل الآن أن تقوم بإنشاء صفحة أو موقعَا ونشره على شبكة 
الإنترنت. إلا أننا نرغب في أن نخبرك بأهم ما نوصي به قبل الخوض في إنشاء موقعك الأول 
على شبكة الإنترنت. فيما يلي قائمة بأهم نصائح تصميم وتطوير المواقع: 
حدد ما تريد أن تقوله قبل أن تبدا 

لماذا نقوم بإعداد هذا الموقع؟ء وما هي الرسالة التى يحملها؟» ومن هم زوار الموقع؟ء 
الإجابة على الأسئلة الثلاثة السابقة هى الخطوة الأولي التي يجب القيام بها عند إنشاء أي موقع» 
فالإجابة على الأسئلة السابقة ستحدد -فى كثير من الأحيان- الطريقة التى ستتبعها فى تصميم 
ونشر الموقع. 

على سبيل المثال إذا كان الموقع المراد العمل به مخصص لشركة ماء فلن تحتاج فى هذا 
الموقع إلى عناصر البهرجة والإبهار» لأن زوار هذا النوع من المواقع يريدون دائما الوصول إلي 
المعلومة التى يبحثون عنها بسرعة ولا يهتمون كثير بالألوان والصور الجميلة والخطوط المزينة 
(انظر شكل 3-13))» أما إذا كنت تقوم بإنشاء موقع للتجارة الإلكترونية يتم من خلاله بيع 
مجموعة من السلع فيجب أن يحتوي الموقع على مجموعة من الصور للمنتجات التى يعرضها 
الموقع (انظر شكل 3-14) ومن الأفضل أن يحتوى أيضًا على عدد من لقطات الفيديو التى 


Eran iraaslîtînn Sûarvfcerê - 


Ek E jew Fires: iE Hi 


GOO A Ab FFF @ 


epFars 1 hHtpe jj emery. Eazrargs Tupi carla pareyî hira 
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ERE aT Ta? RET ITET 


TD OvoFvE 
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BTFEE Taam. raûUHE tû Fa, mMûEÈÎÊ r 
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(شكل 3-13) موقع جاد لإحدى الشركات 
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(شكل 3-14) موقع تجارة إلكترونية 
أما إذا كان موقعك موجها للأطفال (انظر شكل 3-15) فمن الواجب أن يحتوي على 
الكثير من الألوان والصور الشيقة والأصوات الملفتة وبعض الرسوم المتحركة لجذب انتباه 
الأطفال للمعلومات التى يقدمها الموقع. 
Em EE ew Files To Hp‏ 


E 2‏ اسار 1 ا إھا ہے ° 


FFs |] hiper. eck cara) 


Û İîava sana 


Î [rirırai 


(شكل 3-15) موقع به مواد طفولية 
اکتب بوضوح وباختصار 
القراءة من تختلف عن القراءة من على شاشة الكمبيوتر» فزائر موقع الويب يريد أن 
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تحديد وظيفة كل صفحة 

الصفحات التى لا تؤدي وظيفة مهمة داخل موقعة تؤثر سلبًا على الموقع بالكامل فهي 
تؤدي إلى زيادة وقت التحميل عند استعراض الموقع كما أنها تؤدي إلى تعقيد الموقع وتزيد من 
صتعوية التعامل معه» فلا تقم بتقسيم السطومات على عدذ من الصقحات بدوب سيب قري وإذا 
كان هناك موضوعان يسيران معا فى اتجاه واحد فضعهما فى صفحة واأحدة. 


تعرف على طريقك باستخدام خريطة 
بمجرد أن تصبح لديك المعلومات التى تريد عرضها داخل الموقع» قم بتقسيمها وتصميم 
خرظا مرق لخن امرك اكان ار كن 316 
ت 
شاطات] [ الخدمات 


م 


e kez LT fT 
قانمة | خدمة 1-1 الاستقبال‎ | 


(شكل 3-16]) خريطة لمحتويات وصفحات أحد المواقع 


اتبع قواعد التصميم الجيد 

على الرغم من أن الويب وسيلة جديدة للنشر فلا يعني ذلك أن بلقي المصممون بكل ما 
تعلموه فى عالم النشر وراء ظهورهم» فالكثير من القواعد التى يتبعها المصممون ليجعلوا من 
تبات اللات والمت مات اة من تفا عل تسمات مات ايت 


اجعل لصفحات موقعك مظهرًا مميزًَا 

من المهم أن يشعر زائر موقعك عند استعراضه لكل صفحة بأنه لا يزال داخل نفس 
الموقع (انظر شكل 3-17)» ولن تستطيع الوصول إلى ذلك إلا إذا تواصلت مع زوار الموقع 
زت اصقحات مر قك هرا م كل اخرص على آلا ف راا م من حف 
لأخرى» وإذا كنت تستخدم صورًا كخلفية لصفحات الموقع فلا تجعل لكل صفحة صورة مختلفةء 
واحرص على وضع الروابط التى تشير إلى صفحات الموقع الأخري فى نفس المكان من كل 


۳ 


صهفحه. 
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(شكل 3-17) أين أنا الان في موقعك؟ 


عدم الإفراط في استخدام الصور 
من الصعب أن تتجاهل استخدام الصور عند تصميم موقع من مواقع الويب» ولكن يجب 
أن تستخدمها بدون أفراط. فلا داعي لاستخدام عدد كبير من الصور إلا إذا كانت تؤدي وظيفة 
أساسية فى الصفحة وابتعد بقدر الإمكان عن الصور ذات المساحات الكبيرة (انظر شكل 3-18)» 
وحاول دائما تجربة استعراض صور موقعك فى أطوار مختلفة قبل إدراجها بالموقع. 
EE EBE tee Fpolts. o‏ 


9 ر ار کا اا ا a‏ 


rs ا‎ Http erer. Firaı cara kan hij dafa. spr: 
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(شكل 3-18) وابتعد بقدر الإمكان عن الصور ذات المساحات الكبيرة 
إيضاح وسيلة الاتصال بالموقع 
من الضروري أن تتعرف على أراء الزوار في المواد التى يحتويها الموقع وطريقة 
مثل عنوان بريدك الإلكتروني ووضح لزوار الموقع رغبتك فى تلقي أرائهم لتستطيع بعد ذلك 
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تصحيح الأخطاء وتحسين الموقع. 
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بدء العمل ... 


والآن» وبعد أن تعرفنا سويًا على العديد من المعلومات 
التي حتمًَا ستساعدك على التعامل بفهم واستيعاب مع 
تصميم وتطوير مواقع الويبء ما رأيك لو بدآنا في التعامل 
مع برنامج Microsof)® Expression, ® Web‏ لتطبيق هذه 
المغاهيم. 
تابع فصول هذا الباب لتعرف ما نرمي إليه: 

الفصل الرابع: إنشاء Jlلموlقg‏ م؛ڑg Expression ® Web‏ ,„ 

الفصل الخامس: أساسيات تحرير المستندات. 

الفصل السادس: التعامل مع الكود .€C)٠0١٤‏ 
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Expression® Web ta cٿlرمlا إنشاء‎ 


والآن» وبعد أن تعرفت على أساسيات إنشاء مواقع الويب»ء 
الآنء ننتقل سويًا إلى التعرف على كيفية إنشاء مواقع الويب 
باستخدlم‏ ڊرliمج „Microsoft Expressio¬ ® Web‏ 


يتناول هذا الفصل الموضوعات التالية: 
إنشاء مواقع الويب. 

إغلاق مواقع الويب. 

قتح مواقع الويب. 

إعادة تسمية موقع ويب. 


pn pn pn 


pn 


4 
h 
3 
3 
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إنشاء مواقع الويب 
الآن وبعد أن تعرفنا في الفصل السايق على أغلب أساسيات التعامل مع مواقع الويب» 
نعود الآن لنعرف يمكنك إنشاء مواقع الويب باستخدlم‏ ڊرaliج .Microsoft Expression® Web‏ 
تابع الخطوات الآتية لتعرف كيف يتم إنشاء المواقع في هذا البرنامج: 
1- استخدم الطريقة التقليدية لتشغيل البرنامج بصورة صحيحة. 
2- افتح قائمة عاا۴. 
3- اختر الأمر .١٥W...‏ 
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(شكل 4-1) مربع الحوار ع١‏ 


4- قم بتنشیط التبويب عا¡؟ اع . 
يظهر مربع الحوار New‏ بخیارات مختلفة (انظر شکل 4-2). 


I reFap kSê Leng 
Erpty Hah Ss Tree Tea Heb Hea o irl blak 
Fam 


J [pat ih ae red 
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(شكل 4-2) مربع الحوار ٠٠۷‏ بخيارات إنشاء موقع جديد 
5- قم باختيار نوع الموقع من الجانب الأيسر. 
6- حدد نوع القالب المراد استخدامه في إنشاء الموقع الجديد. 
7- حدد مكان حفظ الموقع الجديد. 
بظهر مريع الخرار ةلا باتخارات التختارة (انطر فكل 3د4). 
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(شكل 4-3) مربع الحوار ٠٠۷‏ بالخيارات المختارة لإنشاء موقع جديد 
8- انقر الزرآ ٤ء‏ 
يقوم البرنامج بالبدء في إنشاء الموقع وفق القالب المختارء وإظهار محتوياته في كل جوانب 
نافذته (انظر شکل 4-4). 
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(شكل 4-4) إظهار محتويات الموقع المختار في كل جوانب نافذة البرنامج 
وألآن يمكنك التعامل مع الموقع من خلال كافة أدوات وإمكانات البرنامج بصورة طبيعية. 


إغلاق مواقع الويب 
الآن وبعد أن قمت بإنشاء موقع ويب جديد» وظهرت محتوياته أمامك بصورة تقليدية 
(انظر شكل 4-5)» 
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(شكل 4-5) إظهار محتويات الموقع المختار في كل جوانب نافذة البرنامج 

تابع الخطوات الآتية لإغلاقه. 
1- استخدم الطرق التقليدية لإغلاق الصفحات المفتوحة متل ضغط مفتاحي ۴4 + إ٣ا).‏ 
2- اختر الأمر عاك مها من قائمة ها۴ لإغلاق المواقع المفتوحة (انظر الشكل 4-6). 


(شكل 4-6) أمر إغلاق الموقع بقائمة عاا۴ 


سيطلب منك البرنامج حفظ التعديلات التي أجريتها على صفحاته أو مكوناته 


9" _ قبل الخروج (انظر شكل 4-7). 


ااا اا ای ااا اه و اا ا اا ا ا ا ا ۵ 
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(شكل 4-7) سيطلب منك البرنامج حفظ التعديلات قبل الخروج 


تح مواقع الويب 
وهناء هناك طريقتين لفتح مواقع الويب» أولهما الطرقة السهلة والسريعةء والثانية طريقة 
تقليدية معتادة من أغلب المستخدمين وفي كل البرامج. 


فتح الموقع الأحدث 
حيث نتبع فيها الخطوات الآنية: 
ا التأكد من تشغيل البرنامج بصورة صحيحة. 
2- فتح قائمة اآ۴. 
3- اختيار الأمر كاك Re‏ منها (انظر الشكل 4-8). 


Frama mrn F 


ail, ۳ 


F۴ile ãمئاaب‎ Recent Sites (شکل 4-8) مر‎ 


4- اختيار اسم موقع الويب من القائمة الفرعية للأمر كعك م۸ (انظر الشكل 4-9). 
Recent Sites ۴ 1 DiAnanyûradors\Customers\Microsofti TestingWweb‏ 


J Exit ã {Documents and Setting{Eng-AamriMy Documents{ly Web Sites 
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(شكل 4-9) اسم موقع الويب من القائمة الفرعية للأمر ءعاأS R١‏ 


فتح الموقع بصورة تقليدية 
حبك نشم فيا الكطرات اة اة 


1- التأكد من تشغيل البرنامج 

2- فتح قائمة ا۴ . 

3- اختيار الأمر 08١‏ منها. 
يظهر مربع اlحوlار Open‏ 
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(انظر شكل 4-10). 


i ZÎPaurarh arr Sabir gui Frqg-êrwr ftp Dacurarii ftp Wak Sha 


El karser_HED_ Fell sef 
Î barrar_TT_H1 3E _. me 
I kbarre_RFFO_HiE_mu se 
Î karrar_raE_hitg. me 
El bersar_maE HET, 
Î bank _ze-Flashirtra arf 
lte so_Fle rimî 
CATE Fer Taree irf 
eect 
(Î bulizra arî 
oki_EHS_HHD a 
Î carbark_ary. mf 
E-Gpa hir 
Î ait alralî bama Tah 173 anf 
El thir tthe sai HITS _m ge 
E] Evana hira 
Î feres hin 
E Furma_araaln. hin 


b1 _mees_ he1. me 
ES HEE Hla 
bee he1. 
Et HEE Hl 

Î banrar1. ret 
EItarreri_mtit_ hitb 
Î banrarz'_met14_HIBE, me 
bare. 

(Î banrara. ret 
Eltorrea_wt14_hitb se 
Î barrar_w17S_A4D me 
2 

rq: | 

Files PTS aa Fl 


(شكل 4-10) مربع الحوار 0٠۸‏ 
4- تصفح بصورة تقليدية كافة المجدلدات التي لديك لتختار اسم الموقع المراد فتحه. 
5- اختر الموقع ثم انقر الزر 0۵١‏ بصورة تقليدية. 

تظهر صفحة الموقع المختار (انظر الشكل 4-11). 


Hew Page 1 (E:Documents and Settings\Ene- AmHMy Documents My Web SilesBesICo. him] - ... EEK 
: File Edt View Insert Format Tools Table 3te Data view Task Panes 


: Paragraph > {Default Font} + (Default Size) - 


2 lJ 7 E x ml û ” Paragraph > {Default Font} » [Default Size} 


10 × BestCo.htm ™. x | | Toalbo# 


lr) CDacuments and settingslEng- # lbody=| h5 | 3 Tags 


Folder List 


lM mysite 
# Î) _private 
E Û images 1 Break 
AraDiiıCs, htm ا‎ E Horizontal Line 
aradocs1 swf E 4 1 El ı 
ا‎ mage 

یت ا ا aradocsa, sf‏ | 

1 ا‎ 3Ë Inline Frame 
aradacs3, swf ا‎ e 


r: Layer 


Apply Styles 


div > 
Span 


e 


CSS Properties ٤ 
Tag Properties f55 Properties 8 . 


| Applied Rules Aj Attach style sheet... 
{no rules applied) 2 


_ Select C55 style to apply: 


Clear Styles 


E 
LaDesign E5plt cade ¢ 1 ااا‎ 


Yisual Aids: On Style Application: Auto | 776 KB Quirks A56 x 301 IE C5521 


no» 


(شكل 4-11) موقع الويب بعد فتحه داخل نافذة البرنامج 


إعادة تسمية مواقع الويب 
ربما ترغب في إعادة تسمية أحد مواقع الويب. يتم ذلك من خلال الخطوات الآتية: 
1- التأكد من تشغيل البرنامج بصورة صحيحة. 
2- تأكد من فتح موقع الويب المراد إعادة تسميته. 
3- اختيار الأمر كو,اامك ماك من قائمة عاك (انظر الشكل 4-12). 


mr AY rrr r el; 


Tat ate ik Te PaeE 
e AN Coie 
وی‎ Regi hiii Sê 


A E | 
ا ا‎ 
س‎ Agcaleilaitm Fi parirhi. .. 


(شكل 4-12) أمر ءو, نامك site‏ بقائمة اك 


يظهر مربع نحور Site Settings‏ (انظر الشكل 4-13). 


afte SeE limps 


anal Fran ] Afeancad Î Lregiege | Caiubums 


a Lo 
Fl lacatier Ci Coot and Saltnça rrq -Lirel Fe Con rsartul Fe: Wah SF 


El araç a Hab ıs irq adden malaria Far 
Hae rpm lah tc add Hrdkderi Far ka zar ls ba reir ar 
HETE Teperderoez Fe] He ae Egerin eb aah 
Bb Hir star 


ELE gogek ê mite 


(شكل 4-13) مربع الحوار Site Settings‏ 
4- تأکد من تنشيط التبريب ا۲2٥"ه6.‏ 
5- اكتب الاسم الجديد في خانة مهم طe.‏ 


6 انقر الزر[ ١‏ 


رور لن يسمح البرنامج بإعادة تسمية مواقع تحتوي على مواقع فرعية. إذا حاولت 
قللی إ فعل ذلك» سيعترض البرنامج (انظر شكل 4-14). 


Microsolt Expression Web 


4A Server errar: Error renaming Web site "Z1 Documents and öSettings{Enga-anmrimly DocumentsMy web Sites", 


You can't rename a sike that has subsites, 


(شكل 4-14) عدم إمكانية إعادة تسمية مواقع تحتوي على مواقع فرعية 
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الفصل 


5 


أساسيات تحرير المستندات 


تعتبر صفحة الويب التي تتعامل معها باستخدام برنامج 
Microsoft Expression® Web‏ متلها متل المستند الذي 
تقوم بتحريرة في برiامج Microsoft ¥01!d‏ . 

إلا أننا نتعامل مع هذه المحتويات بشكل مختلف. 

تعال سوبا نحاول إتبات ذلك على ضغاف صفحات هذا 
الفصل. 


يتناول هذا الفغصل الموضوعات التالية: 


إنشاء مستند حديد. 

تحديد خصانص الصفحة. 3 
أ تحدید نوع lلملف E .DOCTYPE‏ 
إدراج النصوص .1۶١×٤‏ 1 
إدراح الصور #ءعو".!. 5 
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إنشاء مسنند جديدة 

لابد وأن تعلم عزيزي الطالب أن لفظ مستiد Document‏ في ڊرliمج Microsoft‏ 
Ex>pression® Web‏ تعني أحد أنواع الملفات (الصفحات أو المكونات) التي يمكن إضافتها إلى 
الموقع. يتضح الأمر بمجرد التأشير بزر الماوس على الأمر ٠6۷...‏ وانسدال قائمته (انظر شكل 
5-1(. 


Fl freest iAaarrg ih rae Ê rite ra hr ras IFT agai 


EE Seek i Free from ereni Web Talia, 


a | Creita frre Haitar Pega... 


“س 


(شکل 1-5( محتويات الأمر ۸٥W...‏ 
والتي تتضمن كافة أنواع المستندات التي nıكj‏ ılرaliج Microsoft Expressio0¬® Web‏ 
إضافتها للموقع الذي تعمل به. 


ستتعرف لاحقًا على كافة هذه الأنواع وما يمكن معه إضفاء لمسات الاحترافية 
على أعمالك. 


إنشاء صفحة ويب جديدة 
إلا أننا في هذا الجزءء سنقوم بإدراج صفحة ويب عوه۴ ط۷ إلى الموقع الحالي. وفيهاء 
نتابع سويًا الخطوات الآتية: 


1- تأكد من تشغيل البرنامج بصورة صحيحة. 

2- تأكد من فتح موقع الويب المراد إضافة الصفحة الجديدة إليه. 
3- افتح قائمة 1۲ذ۴. 

4- اختر الامر NW...‏ من قائمة ٥ا٣‏ 


یظهر مربع الحوار "Ww‏ (انظر شکل 5-1). 
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ا 
Fe wah SI‏ | 


aI ر‎ 
î | Î mi! Tralhe SHE HTH ek Daj 


A 35 

Î Flasher Fag 

| aig: eh Tepa 

E Treaty? 

E 

| Text Fi 

î Craika fan Cera rh Tirmplaba..: 
E Basie fro Haqi Page 


(شكل 5-1) مربع الحوار ع١‏ 


5- تأكد من اختيار التبويب eعه۲.‏ 
6- نشط النوع 21ء6 من على يسار مربع الحوار. 
7 نشط المستند 111 من على يمين مربع الحوار. 


8- انقر الزر 


وار 


EES 


ج 


Help 


Î Horizontal Line 


El Image 


8 Inline Frame 


im! Layer 


Apply Styles | 


Apply Styles Manage Styles ™ 


este. 


Al Attach Style Sheet.,, 


Select C55 style to apply: 


lear Styles 


dFêx 348 XHMLLIOT CSSA 


بإدراج صفحة جديدة إلى الموقع (انظر شكل 5-2). 


AF FET 


293 Lp 


|S Tbr 


Fran Fagus 


WÎ Untitled 1 (Untitled _1.htm] - Microsoft Expression Web 


Taols Table 3it Data view TaskFanes Window 
+ (Default Size} -|B Z7 U = 


> {Default Font) > Default Size} 


lî] Web Site [pm \ ntitled_1.htm 4 
| body 


Tag Properties 5 Properties ™_ # 


Aids: On Style Application: Auto 317 bytes Standard 


(شكل 5-2) إدراج صفحة جديدة 


وما عليك إلا أن تقوم بإدراج محتوياتها بصورة تقليدية. 


5 File Edt View Insert Format 


Aj (None) > {Default Font} 

: 1< E ` a Û | (none 
Folder List jO * 
E Pî ûnanyiûradocsiCustomersiM #% 
E KÛ about 

E î calendar 

E İğ contact 

E Û employees 

E î employment 

E Û faq 

E (ğ images 
E & information _links 3 
4 1 | A 
CS5 Properties 36 


2 


Applied Rules 
{no rules applied) 


CSS Propertiês 


| Design Esplit code 


visual 


لابد وأن تعلم أن الموقع ما هو إلا مجموعة من الصفحات ومعه۲. 
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تحديد خصائص الصفحة 
تاع اترات 44 قرف كف مك اكم كى خضانص الفح الت عل تهاء فين 
ا اة ا ا ا ی و 


1- تأكد من تشغيل البرنامج بصورة صحيحة. 

2- تأكد من أنك داخل الصفحة المراد التعامل مع خصائصها. 
3 افتح قائمة .File‏ 

4- اختر الأمر وعناإممہإ۴ (انظر شکل 5-3). 


FÎ eit i nila 


(شكل 5-3) اختر الأمر ءع )مه۲ من قائمة عاأ۴ 
يظهر مربع الحوار )مم ها۲ ععه۴ (انظر شكل 5-4) يعرض عليك تبويبات وط1 متعددة. 


4 


rara Futile | Frtiamcnd  Cintbiri | Larejirğa 


Lagal uraread {û ritil. hin 
[la: iie 1 

Psp deer 

Ka pedie 


Bare lcar 

Cafan kirgat Fra: 

Page etir Right bit 
Feige ira 

rl 


Lge: 


(شكل 5-4( مربع ly>Ûlر Page Properties‏ 
5- يتضمن هذا المربع التبويبات الأتية: 
اوإمومG:‏ لإدخال الوظائف العامة للصفحة مثل عنوانهاء والتجاه الافتراضي لمحتوياتهاء والتأثير 
الصوتي المصاحب لهاء وغيرها. 
1g‏ atصrه۴:‏ اتحديد خصائص التنسيق الخاصة بهذه الصفحة (انظر شكل 5-5). حيث يمكنك تحديد 
ألوان كل عنصر من عناصر الصفحة مثل الأرتباطات و)م11؛ وغيرها. 
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س 
Garatal Frrmmlirg | Afiawad Citi | Larrjinga‏ 


Eki ara 
ElEackgraired pti 
|r. | 
Caka 
Bhd kaa a HS ا کت ا‎ 
Lark: Î kasi 7 kad reperini: I takai ت‎ 
tiye ran: Wl ttomat: ت‎ 


Herald hiparirk:. | Wl taking: 2 


(شكل 5-5) التبویب وہ ۴٥۲٣‏ بمربع lئحlyر Page Properties‏ 
:Ad vanced Ã‏ وهي مجموعة من الخيارات المتقدمة التي تحدد فيها هوامش الصفحة (انظر شکل 6- 
5( 


Garni Ferrite HFAERd | Cutie | Larejirğa 


Hergê 
op Heq. Î ji 


lalt Harginı 
Boia agin : 
Higtt Mang: 


۹ 
e 


(شكل 5-6) التبویب Advanced‏ بمرڊع Ûlئحlgر Page Properties‏ 
t{0mیںCu:‏ اتحدید بعض متغیرات النظام بحيیث تتواءم الصفحة مع آي متغیرات تطراأً علیها أثناء 
:Language Ã‏ لتحديد بعض الخصائص الحيوية للصفحة متل اللغة المستخدمة فيهاء ووالتكويد 
المستخدم عمالهء"8› وغيرهما. 


©6 التبويب طج1 يعني أن يتم تقسيم مربع الحوار ×80 عه][ه1( إلى أقسام فرعية. 


کل قسم یت يتضمن مجمو عة متناسقة من الوظائف والعمليات. 


تحديد نوع الْملْف عم۷آ٣0د.‏ 


؟؟ 


إدراج النصوص 
لا يعدو الأمر أكثر من التعامل مع مستند ۷٥50۴ ۷0۲١‏ بصورة تقليدية. فقط تأكد أنك 
داخل نمط التحرير ”وام (انظر الشكل 5-7). 


| bhai 


(شكل 5-7) فقط تأكد أنك داخل نمط التحرير ”وائمط 
ثم تبداً بالفعل في إدخال النصوص التي تروق لك (انظر شكل 5-8)» ثم قم بتنسيقها كما 
تشاء باستخدام شريط أدوات التنسيق (انظر شكل 5-9). 


ai Icel Tl Fa Gm Tak Fm ie Hak 
ج و یا‎ FH 1 EE 3 mm ES کا‎ 


سج ا ب [Def Fort‏ ` 


إدخال النصوص بصورة تقليدية 
کڪ Foamy‏ 


A Fame + Cafad Fak) 


ka ga Hr | HE 3 


EEE O- A ae * |‏ 
(شکل 5-9) تنسیق المحتویات باستخدام شریيط الأدوات وہ ۴0۲٣2‏ 


إدراج الصور 
وفي حال توافر الصور المراد إدراجها بالصفحةء تابع الخطوات الآتية لإدراجها: 
1- تأكد أنك داخل الصفحة المطلوبة. 
2- انتقل إلى حيث ترغب في إدراج الصورة. 
3- افتح قائمة ٣مئہ1.‏ 
4- اختر الأمر نا٣‏ (انظر الشكل 5-10). 


Insert j Format Tools Table 


HTML ۴ 

ASP.NET Lantrals ۴ 
O, Hperink.. clk 

Bookmark... Ctra 


lê] From File... 


Eile... = Frorm Scanner or Camera... 


Interactiwe Button... 
Symbol... 
(شكل 5-10) الأمر ںا من قائمة ها۴‎ 
من القائمة الفرعية المنسدلة.‎ ۴۲٠۳ اختر الأمر ...۵ا۴‎ -5 
يظهر مربع الحوار عإں]ء۴1 (انظر الشكل 5-11) يطلب منك اختيار الصورة.‎ 


Arabocs‏ | ت 


rewa kr‏ ا 


(شکل 5-11( اختیار الصورة المراد إدراجها 
ف کل ن ل ار قرا راا اة 
7- اختر الصورة ثم انتر فرق الزر أ . 


يظهر مربع الحوار ءعناءمهإ۴ ityا¡طsiومcءA‏ يطلب منك إدخال نص بديل يظهر في حالة عدم ظهور 
الضتورة (انظر اكل 5-12). 


ArceSSIbilty Properties 


Alternate text; MMS Logo 


¥] shaw this prompt when inserting inages 


(شكل 5-12) إدخال نص بديل يظهر في حالة عدم ظهور الصورة 
8- قم بإدخال النص البديل» ثم انقر فوق الزر | ٥٤١‏ 
يقوم البرنامج بإدراج الصورة المطلوبة بالمكان المحدد (انظر الشكل 5-13). 
FI imla î RÎetilî _1. kia] , Mira ûî Erpirtddlofî Weê‏ 

Lis Ti uw [ramt Pg [ols Tail gi Cava Taal Pare 
| Aj .Faragaph. Tak Fak] . eti are + BF U 
iL E Bl =1 rarmnçh + CeluaForrl . Tek S 
IEEE | Uitte Bhat AF x 


2| 1 


شل 6-13 قوم البرتامع يراج الصورة المطلوية 
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التعامل مع الكرد Cû‏ 


عزیزي الطالب» ریما لا تکون مبرمجًا؛ ولا مطورا لبرمجیات 
في يوم ماء ولكن لابد وأنت تتعامل مع برنامج متل 
Microsoft Expression® Web‏ أن تعرف کیف یتعامل هذا 
البرنامج مع الكود. 

تعال سويا نحاول التعرف عن قرب على كيفغية التعامل مع 
الكود داخل صفحة ويب. 


يتناول هذا الفغصل الموضوعات التالية: 
ھۂ استعراض الکود. 


۸ ططط إعدادات استعراض الکود. 


استخدام المیزة e1118e۸€۲)ہ!.‏ 


E 
4 
4 
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Microsoft Expression® Web واجهة برنامج‎ 

لو أنك تعاملت مع منتجات أخرى لشركة مايكروسوفت مثل نظام التشغيل ا50fهMir‏ 
.WindoN®‏ أو نظام أوفیس Microsoft Office Sys†e"‏ أو برنامج تصميم صفحات الويب 
FrontPae®‏ Microsoftء‏ ستجد أن الإطار العام لواجهات البرامج يكاد يكون موحدا ويتبع نفس 
الأسس للتعامل مع إمكانات البرنامج الذي تستخدمه. 


استعراض المحتويات 
ويما أن ڊرaliچ alaÎ Microsoft Expression® Web‏ لتصميم وتطوير مواقع وصفحات 
الويب» فإنه يتيح لك إمكانية استعراض محتويات المواقع وصفحات الويب التي تعمل بها 


باستخدام أكثر من نمط عرض . 


هناك 3 أنماط عرض رئيسية لمحتويات موقع وصفحة الويب التي تعمل بها (انظر شكل 6-1). 
1 


a Exar: EEF 


(شكل 6-1) 3 أنماط عرض رئيسية لمحتويات موقع وصفحة الويب 
هذه الأنماط ھی: 


أ¡ نمط العرض ١واءم0.‏ 
لعرض محتويات صفحات الموقع للتحرير بصورة تقليدية كما لو كنت تتعامل مع مستند 
.Microsoft Word‏ 


أ¿ مط العرض مءعهإه). 
لعرض الكود المستخدم في إظهار وتصميم وتطوير صفحات الموقع كما لو كنت تتعامل 
مع مستند برمجي في إحدی أدوات التطویر مثل ۲ع/. ۸5۴ M٥0۴٤‏ (انظر شکل 6-2). 


lim hrm". emLanine r calargur _t 
Ita TLE "gy 3 
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J <r 
4 !-- Enê 


¬“ 1E] le ° OTTER ~~ 
LHZIYTIrE rrraaii cı Lira Hi 

PLS EE ABU BISE HIC BET, TAI 
arnmsrn ips wt acat. Jui mum alamaritrm 
EAS, Fazellus qeri lmmız ve] Bll, 
digri aim p> 

TLI Lier TirleciTiir 


Lita TILE "TIELD J f rar, EE  o 1 
SI Epp zkr 

[miz quia EEA, Sure irr Loborrit, 
LiF 

iam FLEE a rHyp et cert. 11E rs 
Comyn rar. KAliqunms mrwut YclLutFpmak. 1 
Ilsa Tre a" rHyp eT err. Liar ¥ 


Sth Appa: Ain IAZIE Stardud HFLLOIT C33: 
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(شكل 6-2) نمط العرض معله) 


نمط العرض ااام6. 


Lwcktiyın wl Bii. Fuata apat jurte wt adi 


EE 


E ELL ES LI E MEE lO TL 
TG 
Curabitur Lrhori as. Treas rare. KLiquns rut 


Hyper kari 1 ãnk arab 
Las ha aL 


Information Links 


Lem maim dolor elt aimit, Eoqserlel 


TERT E AFET 
(شكل 6-3) نمط العرض نام5‎ 
استعراض الكود‎ 
كما أخبرناك عن نمط العرض ”واءه0 أنه يعرض محتويات الصفحة بشكلها الطبيعيء‎ 
الذي يكون الصفحة في النهاية.‎ ٥۵١ فإن نمط العرض ه4٠ يعرض عليك الكود البرمجي‎ 


شریط أدوات الود 2rطا0ه7‏ مله 

وكعادة البرامج التي تتعامل بحرفية مع كلا من مستخدميها ومحتوياتهاء تجد برنامج 
Microsoft Expression ® Web‏ يتضمن شريط أدوات يحتوي على أدوات التعامل مع الكود 
(انظر شكل 6-4). 


EWTE ET 


ق | - opin‏ | پل لے <> | جما وچا ي کڪ | kê ê ê‏ 


(شكل 6-4) شريط أدوات يحتوي على أدوات التعامل مع الكود 
وهو يقدم لك وصولاً سهلا إلى العديد من المزايا التي تساعدك على تحرير الكود بصورة 
مباشرة. فهو يدمج الأوامر التقليدية شائعة الاستخدام بالإضافة إلى ميزات أخرى عديدة تساعدك 


على إنجاز أعمالك التطويرية بصورة جيدة. 


ضبط إعدادات استعراض الكود 
يتيح لك برنامج Microsoft Expressio¬® Web‏ إضفاء الصبغة الشخصية على الكود 
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الذي ترى أو تكتب. فيما يلي كيفية التحكم في إعدادات استعراض الكود. 


الإعدادات العامة لاستعراض الكود 
تابع الخطوات الآتية لتتعرف على الإعدادات العامة لاستعراض الكود: 
1- تأكد من أنك داخل موقع الويب الذي تعمل به. 
2- تأكد من أنك داخل صفحة الويب التي تعمل بها 
3- اختر الأمر sوOpti0 Page Editor‏ من قائمة 001s‏ . 
یظهر مربع الحوار sر0نام0 Page Editor‏ (انظر شکل 6-5). 


ا ۳ 


Page f rfilrir, FpflaeEe 


PFelirm Dada Srippuls Hurr wed tiri ا‎ E اا‎ Ferd: Farmhiai 
Greral pita Thirimal [| Cafu Firka | Cada Furalirg | CF Cal Eadie 
FF Rairratcaiy arda kama Fak wth a lcir 
El argh iriye Ke bî retake 
[Anmaka Cririga cı pımiai 
Ils trana id sı wên pir hî bîd akc têî buti 
I Autrratc al; kch kayteari ka ral lrg oF araq let 
Frage o ge pipet ten re ing teper 


efa Pages LpEGET Araki [Egepl 
Tuk ard Fanta Tpit 


EET Er 


a Ly 
Crd ep E r sl 
Busts miat FA FHphigh tgrrcattls HIF. 
Fre Grier 
saleki girgîn 


(شكل 6-5( مرڊعg‏ lحlgر Page Editor Options‏ 
4- تأكد أنك داخل التبريب 1وإع"ء6. 
5- حدد الخيارات التي تناسب عملك. 


> انقر فرق از ر | 


: العرض ع4٥0].‏ لذاء لا تعبث بهذا الكود بشكل غير مدروس. 

إعدادات التنسيق للكود 

وهي الإعدادات التي ينتج عنها التعامل مع سطور وكلمات وحروف الكود. فمثلاء يمكنك 
تعيين حالة الأحرف ه٤‏ ا2ء أو الحجم» تقسيم الصفحات» أو غيرها وفق رؤية معينة. 
تابع الخطوات الآئية لتتعرف على إعدادات تنسيق الكود: 
1- تأكد من أنك داخل موقع الويب الذي تعمل به. 
2- تأكد من أنك داخل صفحة الويب التي تعمل بها. 
3- اختر الأمر sوOpti0 Page Editor‏ من قائمة 001s‏ . 

يظهر مربع الحوار sو0نام0 Page Editor‏ (راجع شکل 6-5). 


4- انتقل إلى llتبويب .Code Formatting‏ 
يظهر مربع الحوار sرمنام0 Page Editor‏ (انظر شکل 6-6). 


66 


aur 5ã ıı 
apr f rfiinir 


[Esse on cend awe ] a 

ETS res ele Feki 1 

[A Ahirkutm naran ara kemırarm Right nirgn: 
Elikê ie rak gihin 


re Ba 
Bae kt! 
Befira wra 


alectzt Fama 
cparirug brie Les beam 


FEF be rar 1 
prep kyr raha کی ۲ ت‎ 


EIT piggies or êa lira 
[Îlana frrthand pıcgarima hari gerr tir plan 


Baet | 
m= 1 we Î 


(شكل 6-6( مرب lحlgر Page Editor Options‏ 
5- حدد الخيارات التي تناسب عملك. 


6 انقر فوق الزر | |0١‏ 


إعدادات تلوين ١اكود‏ 
وهي الإعدادات التي ينتج عنها تنسيق سطور وكلمات الكود وفق رؤية معينة. تابع 
الخطوات الآتية لتتعرف على إعدادات تنسيق الكود: 


1 قانع تفس الخطوات السابقة 
2 اختر الأمر Page Editor Opis‏ من قائمة 001s‏ 1. 

يظهر مربع الحوار sصەنام0 Page Editor‏ (راجع شکل 6-5). 
3- انتقل إلى التبويب gم¡كه٥C .Color‏ 

يظهر مربع الحوار sوoنام0 Page Editor‏ (انظر شکل 6-7). 
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Pape f rfiirir {pila 


rath Pelrw a Hult wed kirid ااا ا ا‎ Ferd Farhi 
Gm  tkaThrinal | Cafu Fata | .Cada Furairg | C3 Cak Cadre 


ah ee ir 
E Bgrigi ha eaHiriegı 


Gp irra: 

Pharell: 

l3 

toe reterlird 

II 3 

CEE ceni 

2E porta 

SE pnp ie 

SE pnp E 

el ٣ Fiori ilet 

"S5 eleh tt: 

SE sirr hE Dir 

greke eh Tegaplahe ror ehle righ CIs ي‎ 
HTH siiritajie ries 2 liri [Bet Dake | 


الا 


/ ABET LL TS | 


[ ست ]ل[ ع 
(شكل 6-7( مربع lحlyر Page Editor Options‏ 


4 حدد خيارات التلوين التي تروق لك ثم انقر فرق ازز | 


استخدام Intellisence Š jal‏ 
وهي ميزة عظيمة في كافة أدوات تطوير البرمجيات والويب من شركة مايكروسوفت. 
وبالتالي» حتمًا هي موجودة وبقوة داخل برنامج Microsoft Expressi0^¬© Web‏ لمساعدتك على 


إنجاز اعمالك بصورة سريعة وصحيحة. 


ويتم ذلك عن طريق محاولة التنبوء بما تكتب» ومساعدتك على تكملة الكود بصورة 
صحيحة. كيف يتم ذلك؟! 

لو أنك مثلاً قمت بكتابة علامة ">" في أول السطرء ستعمل الميزة على مساعدتك بصورة 
سريعة وتقترح عليك بعض الوظائف (انظر شكل 6-8) لتختار منها. 


(شكل 6-8) تفترح عليك بعض الوظائف 
وما إن تختار› إلا وتقترح مكملات هذه الوظيفة (انظر شكل 6-9) لتختار منها ما يناسب 
عملك . 
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1 

Thkkp: hens, mrdm. Cam"‏ ا 
TTT‏ ا 

e wt. Curmkiktur 1aFarEia- 
î rq 1 TE" SHgpaactaxkt Lirkt f grth 
ork igus eEEar wilurpaTts PL 


FE SHBrpactaxkt Lirkrf ay 4 
keris. llr 


3 rha م ا‎ aR Ir 
I— L CoAT tH wr 


Err Fj Guti =F‏ ا 

E! — Bmgin Friar —»‏ 
(شكل 6-9) وتقترح مكملات هذه الوظيفة 

ويظل الأمر هكذا حتى تنتهي من كتابة سطر الكود وفق خياراتك التي لا يمكن أن تكون 


قو شه ورتا( کل 610 


Ain hea Ler fF. xk 


ia‏ ا 
lia‏ 


فس 
(شكل 6-10) لا يمكن أن تكون غير صحيحة برمجيًا 
أما كيف يتم ضبط إعداداتهاء فلك أن تتابع السطور التالية: 
1- تابع الخطوات السابقة حتى تصل إلى مربع الحوار sو0نامO Page Editor‏ (راجع شكل 6-5). 
2- انتقل إلى التبویب ٥م1118‏ tہ].‏ 


ا 


Geral. | taa Thins Dafak Part Gade Frmsling | C35 
rng | Fehm | Gra pra | Pular and Gi Raa Ford Fark 
TF Palette] seki sa Ic e Coe pane oi 

tha FD 

BHR Eat nga] 

E r | 

AEF HET Ktet craplalin 

Epi Heer apelin 

E 

ih [reef 

Eglo lag 

FHI Hite hj gaint 

FT Hr ka vake qı 


FFASEIET mirkaie iha irê 
ICES alate datig rac 


Laj Hasirks 
[IEnahls Crda tqrinka Fc Ha rier daemtt: 
FASE mks 
EET 
Door lapis 


(شكل 6-11( مربع Ûlئ>lgر Page Editor Options‏ 
3- حدد خیارات هذه الميزة بما يروق لك. 


4 انقر فوق الزر |٤]‏ 


وماذا بعد ألن نبني موقعًَا على الويب؟ 


لا تقلق. فما کان کل ما سبق إلا لكي نبد سويًا في 
بناء أولى مواقعك على شبكة الإنترنت. 
لو راحعت الفصول السابقة. ستكتشف أنك لن تحتاج 
لأكثر مما فيها لكي نبداً حالاً في بناء موقعا على الويب. 
تابع فصول هذا الباب لتعرف ما نرمي إليه: 

الفصل السابع: التعامل مع صغفحات .€C8SS‏ 

الفصل التامن: التعامل مع الروابط كمماا. 


الفصل التاسع: إدراج الجداول ۶٤[طھ1.‏ 
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التعامل مع صفحات ]SS‏ 


الويب» في تعريف أخر له» هو نشر معلوماتك على الملأء 
وبالتالي» هو أمر لابد من العناية بمظهره. 

وبالمظهر لیس فقط أن يبدو كل شئ حميل» ولكن أن يتناغم 
ويتناسق في شکل موحد. 

هذا ما تساعدك صغحات Cascade Styاe Shee)s 08S‏ علیه. 


يتناول هذا الفغصل الموضوعات التالية: 
ما المقصود بصفحات SS؟C8°.‏ 


.Manage Styles مleمJl‎ «j استخدام‎ 


.Appاy‎ S)را1٤eء استخدام حزء المهام‎ Ã 


E 
4 
0 
1 
ن‎ 
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تناغم محتوى الويب 

بداية أود أن أشير إلى أن موقع الويب الذي تقوم بتصميمه وتطويره لن يكون مجرد 
صفحة أو ثنين» حتى وإن كثرت صفحاته ومكوناته» فلن يكون فقط عبارة عن مجموعة متناثرة 
من صفحات الويب» الأمر الذي لابد وأن تحافظ عليه أن يكون هناك تناغم في الشكل والتصميمء 
والمحتوى. 

فلا يعقل مثلاً أن تضع صورتين في نفس الصفحة بأحجام مختلفةء ولا أن يكون العنوان 
الرئيسي في صفحة يختلف في الحجم أو الخصائص عن نفس العنوان في صفحة أخرىء» ولا أن 
يتغير تنسيق وخصائص نصوص الموقع من صفحة إلى أخرى. 

لذلك» أنت في حاجة إلى أداة تساعدك على تحقيق هذا التناغم» وتعينك على تحقيق تنسيق 
موحد لكل محتويات الموقع. لذلك« هناك صفحات الأنnماط‏ nllتتlلıة Cascade Styles Sheets‏ 
5. ونظرًا لأهميتهاء نتناولها بالشرح والتحليل هنا في هذا الفصل. 


ما المقصود بصفحات css‏ 

تتيح لك صفحات 55 إمكانية التحكم في مظهر المحتويات التي تظهر على صفحات 
موقعك بصورة كبيرة» وخاصة إذا كانت عدد صفحات الموقع كثيرة جدا. والأمر هناء لن يخضع 
للصدفةء فكل شي سيسير بكل دقة. 

صفحات C55‏ أو الخصائص التي تتضمنها قد تكون خارجية أو داخليةء أو داخل سطور 
معينةء أو ربما تكون مرتبطة بصفحة. وهذه الصفحة قد تخضع لأكثر من تنسيقات صفحة .٤55‏ 
ولكن» خصائص وتنسيقات أنماط ٥55‏ من النوع هام1 يبقى لها اليد الطولى والأولوية في التنفيذ 
من الخصائص الخارجية أو الداخلية» وخصائص وتنسيقات أنماط ٥55‏ من النوع ا۵٣1"6۲‏ يبقى 
لها اليد الطولى والأولوية في التنفيذ من الخصائص الخارجية. 


فيما يلي مثال لتتسقیات C55‏ من النوع ا۵٣‏ ٣عtہ]:‏ 


<style type="text/css"> 


TORNE-WELGRE: GOLF 
COLOR: FEEOOOUUE 


ORE SE OBE, 
ORE LAMI: Arial, HelVECIEA, SANS SEEN 


Fh 


<. 


headlines { 
BDOFGET=COlLOET FOUOOON, 
DOSER WAS EAE EMIS 
DOSER SEY MEE SO O 
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} 
</style> 


فيما يلي متال لتنسقیات C55‏ من النوع عہااہ[: 


SO SE VIE ORE MIEN OME: OOO IONE GSEVIES CANNES COO 
FFFOO0O0O0"> 
Manage Styles استخدام جزء المهام‎ 
يتيح لك جز ء المهام كعاراك موه ة۷ إمكانية تطبيق» وتعديل» وإعادة تسميةء بل وحذف‎ 
أنماط التنسيق. بالإضافة إلى إمكانية الأستعانة بصفحات °55 خارجية أو ألغاء استخدامها.‎ 
.)7-1 وكذلك» تبادل صفحات 055 بين المواقع المختلفة التي تعمل بها (انظر شكل‎ 


a] Hea Erke. 
Bj aiizh ate Sheri 


(شكل 7-1( جjء‏ lئمھlم Manage Styles‏ 
التحكم في عرض أنواع صفحات كو 
فعندما تقوم بفتح صفحة ويب معينة» يعرض علبك جز ء المهام كارك 29ج“ قائمة 
بكافة أنماط التنسيق ما عدا ذات النوع €inاn[.‏ إلا أنه يمكنك التحكم فيما يعرضه لك من خلال 
قائمة نام0 (انظر شکل 7-2). 


و 


Bl Hiiailê tert E r almgorls Bb Orla 


CS her Eile E arin 

3 Cunmanî Fag Zalagotsa E Tra 

EE‏ 3 ا 

31 Î yuk aa ha Sy mad mert Fe 
bed u leg Led elen 
rT o r E er 
n | Galt Steel Sile Fre 


(شكل 7-2) يمكنك التحكم فيما يعرضه لك من خلال قائمة كnهاام0‏ 
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فقط بزر الماوس إلى نمط التنسيق المطلوب بجjز‏ ء المlم Manage Styles‏ 


3 لعرض كافة المعلومات عن إحدى خواص نمط تنسيقي بصورة سريعة أشر 


(انظر شکل 7-3). 


E 
ki iia ire eel 


(شكل 7-3) عرض كافة المعلومات عن إحدى خواص نمط تنسيقي 


إنشاء نمط تذ تنسيقي 


ولا أكثر من أن تتجه إلى جزء المهام كارا و٣۷3‏ وتقوم بالنقر على الزر ١w‏ 
ااك ليهر لك مربع الحرار مالاك ٠٠٠#‏ (نظر شكل 7-4). يتيح ك تسمية نمط اسيق 


الجديد» بالإضافة إلى تحديد خصائصه. 


CIAggkr rma sta Le dacurard ınan 


r 


tazt-cacar atin: 
CÎ searirar 
Drettmagh 
birk 
rare 


| ست | 
(شكل 7-4) إنشاء نمط تنسيقي جديد 
وإذا كنت من مستخدمي أحد برامج نظام أgفيس Microsoft Office System‏ مثل 


aktay 
اآ ا‎ 
ااا‎ 
Fords 
Pai-elakl 
Tenf-irer gral 
k1 
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Microsoft Word‏ أو Microsoft Excel‏ فحتمًا يمكنك التعامل بسهولة مع هذا المربع الحواري. 


باختيارها. يمكنك مطالعتها قبل النقر على الز ر أ 8| 


الاأستعانة بنمط تنسيقي خارجي 

ولا أكثر من أن تتجه إلى جزء المهام كعاراك موجه“ وتقوم بالنقر على الزر A2٤۸١‏ 
Sheet‏ eاtyك.‏ ليظهر لك مربع الحوار ٤٤عط؟‏ عاsty Attach‏ (انظر شکل 7-5). یتیح لك تحدید 
مكان حفظ نمط التنسيق المراد الأستعانة به (إرفاقه بالموقع الحالي). 


& يقوم مربع الحوار عار؟ سء" باستعراض خصائص التنسيق التي تقوم 


eı | 
itarh iri. O AHI begê Earh aiê {lirk 
El tirreri pê 


[Lw Jl e |‏ 
(شكل 7-5) إرفاق نمط تنسيقي من مكان أخر 


يمكنك من خلال مربع الحوار السابق أيضًا تحديد ما إذا كنت ترغب في إرفاق 
نمظ التنسيئ المختار بالصفحة الحالية أو بجميع صفحات الموقع الذي تعمل 
به 


مع الوضع في الاعتبار أن تنشيط الأختيار )”اء بحيث يتم الربط بين الموقع الحالي 
والموقع المأخوذ منه نمط التنسيق» قد يؤدي إلى تغيير نمط التنسيق لديك في حالة تغيره في 
موقعه الأصلي. لذلك» ننصح بتنشيط الأختيار هم1 لو أنه لا علاقة لك بهذا الموقع الأخر. 
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التعامل مع الروابط ئء)مآL‏ 


عزيزي الطالب. ما سنتحدن عنه في هذا الفغصل يمثل 
تجسیذًا لمفهوم الویب بشکل کبیر. 

لذا نرحو الأنتباهء نرحوالأنتباه. 

تعال سويا نحاول التعرفق عن قرب عن كيفية التعامل مع 
الروابط داخل صفحة ويب. 


يتناول هذا الفغصل الموضوعات التالية: 
أساسيات الروابط. 

الربط مع مكان في نفس الصفحة. 
الربط مع صفحات أخرى. 


pn pn pn 


pn 


فتح الرابط في نافذة حديدة. 


3 
3 
0 
۴ 
۴ 
E 
آ‎ 
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أساسيات الروابط 
EES N E BREE EE ES‏ 
إرتباطات" ءا أو ك)”اا#م ر١٣‏ هي أجزاء من صفحة الويب قد تكون نصا أو صورة عند النقر 
NE ENE SP CIRE‏ 
أو ملفات الفيديوأو أى نوع آخر من الملفات»ء وتوفر الروابط وسيلة أساسية لاستعراض مواقع 
ا 


الروأ بط إلى الإشارات المرجعيه 

O EC O E E EC E 
طويلة أو تحتوي على أجزاء هامة تود التركيز عليهاء وفى أحيان كثيرة تستخدم الروابط فى‎ 
أجزاء متفرقة من الصفحة لتعود بك إلى بداية الصفحة.‎ 


على أية حال لإنشاء مثل هذه النوعية من الروابطء لابد وأن تقوم بخطوتين مهمين جدا 


ه٠‏ تحديد مكان الإنتقال. وهو وضع إشارة )۲" )ه8 في مكان ما بنفس الصفحة. 
ه٠‏ إنشاء الإنتقال. إخبار نص أو صورة ما بإنه عند النقر عليه بزر الماوس» عليه أن ينتقل 
إلى مكان هذه الإشارة. 


الربط مع مكان في نفس الصفحة 
تابع السطور الآتية لتعرف كيف یتم إنشاء إشارة مرجعية Bookmark)‏ داخل صفحة من 
e E‏ 


1- قم بالإنتقال إلى موقع الويب الذي تعمل به. 
2- قم بالإنتقال إلى صفحة الويب التي تعمل بها. وليكن الصفحة التالية (انظر شكل 8-1). 
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Fl rod ig [TE Aiko rh rads 


Pi EH am [remt Paik Tole Tekh SE Dava Tuli Pan rde tak 
f TelahRLRS, lel, Harts Telak ا‎ EEA 


mdr Mare 
-Pradyrt Ceaerigtian 


(شكل 8-1) صفحة الويب التي نعمل بها 
3 انتقل إلى الموضع المراد الإنتقال إليه. وليكن ما قبل كلمة "وء ںله۴۲". يتم ذلك عن طريق وضع مؤضر 
الكتابة قل الكلة العطلوية (أول الس 
4- افتح قائمة ٤]عوم].‏ 
5- اختر !لمر .Bookmark‏ 
یظهر مربع الحوار kاھص)مم8Bo‏ (انظر شکل 8-2). 


1 


(شكل 8-2) مربع إلحوار Bookmark‏ 
6- أكتب كلمة "مه1" خilة .Bookmark name‏ 
ا 


.)8-3 الرابط )م1 به. وليكن بأقصى يمين الصفحة (انظر شكل‎ eg NT 
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111 | # 


356 x 417 XHTML 1.0T | 


(شكل 8-3) الموضع المراد إنشاء الرابط ١نا‏ به 
9- اكتب كلمة مه آ. 
0ق الاين على فت اة اا عي بور اماس 
1- افتح قائمة )موم]. 
12- اختر لأر Hyperlink...‏ . 
یظھر مربع الحوار kمناامءمHy‏ ertیnا‏ (انظر شکل 8-4). 


[a Eire toreiria maren & E) [Î 
EÛ Dare ss aoa Riana Teg tgh 
eba: 


[ = ]ا 
(شكل 8-4( ربع lg>Jlر Insert Hyperlink‏ 
3- انقر الأختيار سمل اطا م1 معه۴1 لإعلام البرنامج بانك ترغب في إنشاء رابط إلى مكان في نفس 
الصفحة الحالية 
یظھر مربع الحوار kمنااەمر٤‏ ٤امیہ]‏ بشکل مختلف (انظر شکل 8-5). 


(شكل 8-5) مربع الحوار )اا#مر٣‏ ٤هكہ]‏ بخيارات مختلفة 
4- انقر اسم العلامة المرجعية )هم )مه8 التي أنشاتها وهي "م0]". 


5-انقر فوق الزر |[ ]| 
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تعود للصفحة التي تعمل بهاء ولكن بعد تنسيق نص الرابط )11 بتنسيق مختلف (انظر شكل 8-6). 


Fer E | HF HL LAT 5 


(شکل 8-6) تنسیق نص الرابط ۸٣ا‏ بتنسيق مختلف 
6- الآن» إذا قمت بنشر هذه الصفحة على الإنترنت» فسوف يتم الإنتقال إلى أول الصفحة في حالة النقر على 
الرابط ه۲. 


الربط مع صفحات أخرى 
وهناء سنقوم بإنشاء رابط يقودنا إلى صفحة أخرى. تابع السطور الآتية لتعرف كيف يتم 
إنشاء إشارة مرجعية 800۸۳٣2۲‏ تنقلك إلى صفحة أخرى من صفحات الويب: 
1- تابع نفس الخطوات السابقة حتى الخطوة رقم 8 
2- اکتب انئجمlة For more information, please contact us anytime‏ بنهاية الصفحة الحالية (انظر شكل 7- 
8 
Pr Ts Li Hi Fi f‏ 


Frid uêt Dîl pil ori 
a Price 


Far mre formation, pleas rorikact sarim 


ELE E STE TEL EET 
erd gp ha 


ia hpplealire Haka | IE Sederd HA A LDT OC 
(شكل 8-7) الجملة المطلوبة بنهاية الصفحة‎ 
قم بالتأشير على الكلمة (وں موامهء) ضمن الجملة.‎ 3 
.]موع]٤ افتح قائمة‎ -4 
.Hyperlink... اختر الأمر‎ -5 
.)8-4 (راجع شکل‎ sert Hy مeاانمk یظھر مربع الحوار‎ 
.)8-8 حدد مكان الصفحة المراد الإنتقال إليها من مربع الحوار kمناإءمرH t٤إميم] (انظر شكل‎ -6 


Link tre Tazt ka aplrp: cerhart um 


1 E aie SEH IE 


i 
٣ 
_ e چ ت‎ 


iE E I LI 


a 
ا ج ا‎ 


(شكل 8-8) حدد مكان الصفحة المراد الإنتقال إليها 
7- انقر اسم الصفحة المطلوبة لاخيتارها. 
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۾ انقر فوق الزر|آ 2_| 
تود للصفحة ي تعمل بها وأكن يعد تميق نص الر بط ا1 سيق مختلف (انظر شكل وم 


aI prî 


iman, pk 2 time 


krkael | Enptqme | Emil | AE |. [roman 
[Fer Fradygis Frmretiare | Treas Alla p- ™ 
E 


DEE had BLATT 1T KESR 


(شکل 8-9) تنسیق نص الرابط ۸٣ا‏ بتنسيق مختلف 
9- الآن› إذا قمت بنشر هذه الصفحة على الإنترنت» فسوف يتم الإنتقال إلى صفحة بيانات الأتصال. 
0 مفتاح الأختصار لتعيين علامة مرجعية )إهد. )هم8 هو مفتاحي 1+6إ)٤.‏ 
س 


3 مفتاح الأختصار لانشاء رابط )امم ر1 هو مفتاحي .C1+)‏ 
8 


يمكنك باتباع نفس الخطوات» إنشاء رابط إلى علامة مرجعية موجودة بصفحة 
6e‏ أخرى داخل الموقع. 
الربط مع ملفات 
يمكنك إنشاء روابط إلى أي نوع من أنواع الملفات» وستجد أن هذه النوعية من الروابط 
مفيدة فى حالات كثيرة» على سبيل المثال قد تحتوى صفحة من صفحات موقعك على روابط 
لمجموعة من البرامج المجانية الهامة ليستفيد منها زوار الموقع»ء كما يمكن أن تحتوي صفحة 
أخري على روابط لمجموعة من الصور أو لقطات الفيديوء ولإنشاء مثل هذه النوعية من الروابط 
ابتع الخطوات التالية: 
1- قم بنقل الملفات التي تريد إنشاء روابط لها إلي المجلد الذي يحتوي على ملفات الموقع الذي تقوم بتصميمهء 
ويمكنك إنشاء مجاد فرعي دال هذه المجلد لحفظ الملفات داخله, 
2- قم بإنشاء صفحة جديدة باسم "بر امج مفضلة أو ئصهإعهإ۴ مtزإمره۴"»‏ والتي ستحتوي على مجموعة من 
الروابط إلى برامج مجانية مفيدة. 
3 قم بكتابة نص من أختيارك لاستخدامه كرابط مثلا قم بكتابة اسم البرنامج الذى تريد إنشاء رابط له 
4- اضغط مفتاحي C٣1 + K‏ ليظهر لك مربع اÛحوار .Insert Hyperlink‏ 
5- تأكد من تنشيط تبويب الملفات (انظر شكل 8-10). 
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Lirk tre Jezt ka daplay: Irfan 


Û 1ء‎ 
ع‎ E 
nk Fega E TL E o o e os | 
CrignarF rarer Dutra Fcc Pierce Expr: ria Fn 
La laa peka Dipirse FET Epes rhe: 
Crime Araceli Ctra Fcc Pacrcat Expr ria Fn 
La laa peka Diir PET Toe Epes hr Er 
CrifnarF Ararccul Dntcrars Fêcrcaat|T antirgqii wk perr rkui pı cclurk. 
I I o e e o 1 
T:lDoruraria arl Saini Frg- tre Appian Caka fF acrcaat | Taruplat 
eris brad Sim Ergr tw fy eris fly Heb Henfeiy 
CrifnarF Ararcccul Dutra Fcc Pacrraat Expr Daria Ey 
Da lr Heka Di pTaere PET PTT Epes pF 
CrlFnary Arariccul Tutor ars Facrcat | Tatirgiraki da fauk. hiri اس‎ 


Tp 1l heea TT Trg Terr ph eerie, Th peh] 


em mem 
(شكل 8-10) اختيار إدراج رالط إلى ملف‎ 
أنقر فوق أسم الملف الذي تريد إنشاء رابطة له.‎ 6 


7 أنقر فوق الزر ]۵_| 


يجب أن تقوم بنقل الملفات التى تريد إنشاء روابط لها إلى المجلد الذي يحتوي 
قللئ بالا على ملفات الموقع الذي تقوم بإعداد« وإلا لن يقوم ڊرliمج Microsoft‏ 
Expression ® Web‏ بنقلها إلى خادم الويب الذي ستنشر موقعك عليه. 


الربط مع الصور 

بدلا من إنشاء الروابط على هيئة نصوص» بإمكانك استخدام الصور كروابط أيضمًا. هناك 
طریقتین لاستخدام الصور کروابط فى برنامج Microsoft ع×مrعsءi0 ۸® W6‏ الطريقة الأولى 
ف رر کا کے ا را ا وار ها ةل فم رة ا م 
من الأجزاء كل جزء يمثل رابط مستقلةء ويسمي كل جزء من تلك الأجزاء بقعة نشطة ا0مئاه٣‏ 
وتسمي الصورة ككل م2" عوه"[1. 

تل الشطر ات 0 امرف فة كن انكام رة كا كر بف 
1- قم بإدارج صورة داخل إحدى صفحات الموقع الذى نقوم بتصميمه. 
2- قم باختيار الصورة بالنقر فوقها بزر الماوس. 


3- اضغط مفتاحى ‏ + [إ]٣‏ معا فى لوحة المفاتيح ليظهر لك مربع الحوار التقليدي .Insert Hyperlink‏ 
4- قم بتحديد صفحة أخري من صفحات الموقع ( كما تعلمنا سابقا). 


5- انقر فوق الزر | 
إنشاء روابط على هيئة Image map‏ 

كما ذكرنا سابقا عندما تقوم بإنشاء م" موه"1 فإنها تحتوي على مجموعة من البقع 
النشطة كل منها يمثل رابطة مستقلة» ومن الممكن أن تكون تلك البقع على شكل مستطيلات أو 
دوائر أو أي شكل آخر غير محدد. 

إذا أردت إنشاء بقع نشطة مكونة من أشكال رسوميةء تابع الخطوات التالية: 


آ ایا چ ضور في أ فخا من ففخات لزق آي ت ا 
2- انقر فوق الصورة بزر الماوس لاختيارها. 
3 تأکد من إظهار شريط أدوات الصور یعإںہ1٣‏ (انظر شكل 8-11). 
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ET OTETE 8 al al 2L 


(شكل 8-11) إظهار شريط أدوات الصور كعاuاء"‏ 
4- انقر فوق أداة المستطيل لآ فى شريط أدوات الصور. 
5- ضع مؤشر الفأرة على زاوية المساحة التى تريد تحديدها كبقعة نشطة. 
6- اسحب مع الضغط بزر الماوس لتصل إلى الزاوية العكسيةء وليتم رسم مستطيل يضم المساحة المطلوبة للبقعة 
النشطة Hotspot‏ . 
يظهر لك الآن مربع الحوار kمنااءم nrt Hy‏ المعتاد. 
7- قم بتحديد صفحة أخري من صفحات الموقع ( كما تعلمنا سابقا). 
8- كرر الخطوات السابقة لإنشاء بقع نشطة أخري إذا لزم الأمر. 
9- نفس الامر يمكنك اتباعه باستخدام أشكال أخرى. 


الروابط إلى عنأو ين الإلكتروني 

يوفر برنامج طWe Microsoft Expressi0^¬®‏ إمكانية إنشاء روابط تشير إلى عناوين 
ری ر او و و ع DD‏ ا 
وعندما يقوم أحد زوار موقعك بالنقر فوق واحدة من تلك الروابط سيتم تشغيل برنامج البريد 
الإلكتروني الإفتراضي لديه» وسيبداً البرنامج فى إنشاء رسالة جديدة وسيتم وضع عنوان البريد 
الإلكتروني الذي تشير إليه الرابطة آمام البند: ۲0 فى البرنامج وبعدها سيكون بإمكانه كتابة نص 
الرسالة وإرسالها كأي رسالة بريد إلكتروني عادية. 

ان ارو اط ا لات اذ 
1- قم بفتح صفحة "اتصل بنا 0S‏ 1عهام ه٥"‏ والتى من المفترض أن تحتوي على بيانات الأتصال بالشركة 


ومن المفيد اا ت البريد الإلكتروني (انظر شكل 8-12).__ 
E 2‏ 


IE gag UF rmajth pleagirê io cefa o arl. Wa ara haî Îa raat li 
aj ibing oF merê zêf Ûr akî oF Ry ngılrlaî 


Halling Addrers 


Ta AF tagarar SL, Har CI, Cai 
e-mail 
[el 
frau zan Contr we by e+ maê 
Hours of Operation 

zede) 4‏ تا 


hk Oni Khe pki Mle | BISE Seld u HE A OT SE 


(شكل 8-12) التحضير لعمل رابط لعنوان البريد الإلكتروني 
2- قم بكتابة نص من اختيارك لاستخدامه کرابط مٿثل ما هو موجود بالشکل. 
3 قم باختيار هذا اللض, 
4- اضغط مفتاحی ٣)1 + K‏ ليظهر لك مربع اJحوار .Insert Hyperlink‏ 
5- في الجزء الأيسر من مربع الحوار» أنقر فوق الزر ووعإل ل۸ 1زهص -ع (انظر شكل 8-13). 
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Ed shes 
1 
Stet: 


ezz 
o" 


a 


(شكل 8-13) وضع رابطة لعنوان البريد الإلكتروني 
6- فى خانة وومإل ل۸ 1ه -8 أكتب عنوان بريدك الإلكتروني. 
7- فى خانة ءعزطاں؟ أكتب عنوان الموضوع الذي تريده لرسالة البريد الإلكتروني التي يرسلها لك زوار الموقع 
من خلال هذ الرابط. 


8- انقر فوق الزر | *2 
الروابط إلى صفحات جديدة 
من الممكن إنشاء رابط يشير إلى صفحة جديدة ليست موجودة» أي إلى صفحة ستقوم 
ا ا ن هاد اتف اء هن هذه الر عة من اروا اتم الغطر ات اة 
اد ك بف اتفه الر نة 
2- قم بكتابة نص من اختيارك لاستخدامه كرابط متلا قم بكتابة اسم الصفحة الجديدة وليكن "جديد الموقع". 
3- قم باختيار هذا النص. 
4- اختر الأمر )مناإءم ر8 من قائمة ۲٤۲٥ء[‏ ليظهر لك مربع Jحار .Insert Hyperlink‏ 


5- فى الجزء الأيسر من مربع الحوار أنقر فوق الزر ٤رمصuء00‏ سم مهم٤»‏ وستجد أن شكل مربع 
الحوار قد تغير وأصبح يحتوي على صندوق جديد (انظر شكل 8-14). 


Jetta drier: brn 
Hes of rea dogma 


Ful path: 


Fla jE lAnary Ararercuiutcrars Picci Tatirgrakirarkaect, 


iter ml 
CI Erka Ha rame dacuarart akar 
E El Heg reee fear TFA 


(شكل 8-14) شكل مربع الحوار قد تغير وأصبح يحتوي على صندوق جديد 
6- في صندوق ٤011ل‏ سعد fه‏ مص N‏ قم بكتابة اسم الصفحة الجديدة التي تريد إنشاءها. 


7 انقر فوق الزر | 6 ] 


الروابط إلى موقع ويب أخر 
الروابط إلي صفحات من مواقع الويب الأخرى (غير صفحات موقعك) تعد من العناصر 
الأساسية فى معظم مواقع الويب» فالكثير من مُصمي مواقع الويب يضعون ضمن مواقعهم قوائم 
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بمواقع الويب التى تقدم مواد ذات صلة بالمواد التي تحتويها مواقعهم قوائم بالمواقع المفضلة 
لديهم» كما أن العديد من المواقع تستخدم أسلوب تبادل الروابط بمعني أن تتفق مجموعة من 
المواقع على أن تضع كل منها روابط تشير إلي المواقع الأخري كوسيلة لزيادة عدد الزوار إلي 
تلك المواقع. 
ولإنشاء مثل هذه النوعية من الروابط اتبع الخطوات التالية: 
1- قم بفتح صفحة )دا1 م )مه۴ والتى من المفترض أن تحتوي على مجموعة من الروابط إلى مواقع 
الويب المفضلة إليك. 
2- قم بكتابة نص من اختيارك لاستخدامه كرابط مثلا قم بكتابة اسم الموقع الذي تريد إنشاء رابطة له وليكن 
'"شركة أرادوكس". 
3- قم باختيار هذا النص. 
4- أضغط مفتاحی × + Ctr1‏ لإظھار .Insert Hyperlink gal‏ 
5- فى الجزء الأإيسر من مربع الحوار« أنقر فق jllر Existing File or Web Page‏ 
6- فى صندوق ووع]ل ل۸ قم بكتابة عنوان الموقع. 


7۔ نتر فوق اازر | 5 ] 


Teika cpl: 


i Calpine Fit Tir E1 ûl E 


| Hite rra. ETE 


(شكل 8-15) شكل مربع الحوار قد تغير وأصبح يحتوي على صندوق جديد 


يمكنك النقر فوق الزر ا٥۷‏ 0ط مس80 ليتم تشغيل مستعرض الويب الذي 

رو تستخدمه»ء وباستخدام مستعرض الويب قم بالوصول إلى الموقع الذي تريده» بعد 

ا ذلك عد مرة أخري إلى برنامج Microsoft Expressi0¬ ® Web‏ وستجد 
أن عنوان الموقع موجود داخل صندوق ولل .A۸‏ 
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التعامل مع الجدارل ئمااج۲آ 


لا يستطيع أي مستخدم أو مبرمج أن ينكر فائدة الجداول 
6 في تنظيم وعرض البيانات داخل الصفحات بصورة 
مرتبة ومنظمة بشكل كبير. 

لذاء نرحوالأنتباه. فسوف نحاول على ضغاف صفحات هذا 
الغصل التعرف عن قرب على كيغية التعامل مع الجداول. 


يتناول هذا الفغصل الموضوعات التالية: 


Pn 


ما هي الجداول؟ 


Pn 


إنشاء حدول حدید. 


Pn 


تحرير خلايا الجدول. 
صبط خصانص الحدول. 


pn 


E 
4 
ھ‎ 
3 
۹ 
7 
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ما هي الجداول 

يمكنك استخدام الجداول كعااة1 فى صفحات الويب الاستخدام التلقيدي لها كوسيلة لتنظيم 
المعلومات فى شكل منسق ومتكامل» إلا أن للجداول ميزة مهمة أخري» فهي توفر لك بالإضافة 
إلي تنظيم المعلومات وسيلة ممتازة لإنشاء تصميمات معقدة لصفحات الويب كما سنذري فى 
الصفحات التالية» ويوفر برنامج Microsoft Exprمssi0 ١® We‏ العديد من الطرق المرنة لإنشاء 
الجداول وتخصيصها لتناسب أغراض تنظيم المعلومات وتصميم الصفحات. 


إنشاء جدول جدید مإط1a New‏ 
سنبداً الآن بالطريقة المباشرة بمعني أنك تريد إنشاء جدول مكون من عدد معين من 
الصفوف والأعمدة» وسنفترض مثلا أننا نريد إنشاء جدول مكون من ثلاثة صفوف وأربعة 
أعمدة. تابع الخطوات الآتية لتعرف كيف يتم ذلك: 
1- قم بتشغيل البرنامج بصورة صحيحة. 
ا ا ل ا 
3- انتقل إلى حيث تريد إدراج الجدول. 
4- افتح قائمة ٥اطة۲.‏ 
5- اختر الأمر bleۆTa .Insert‏ 
یظهر مربع الحوار عاطھ۲ مہ1 (انظر شكل 9-1). 


CÎ cal apıa tabla kcrrar 
a n 

gtr: a: 
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Set sr desk fo rea tebl 


(شكل 9-1) مربع الحوار bleۆ1a Insert‏ 
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6- حدد عدد الصفوف والأعمدة من المربع الحواري. 
7- انقر الزر ا[ ٤‏ 
قوم البرنامج بإدراج الجدول المطلوب بالخصائص المطلوبة (انظر شكل 9-2). 


rE El 


On Spa eppliealirr: Hats SDZktan ardu Ez EN HMLNDT Z1 


(شكل 9-2) يقوم البرنامج بإدراج الجدول المطلوب بالخصائص المطلوبة 

تحرير خلايا الجدول 

لإضافة نص أو صورة إلي خلية من خلايا الجدول» انقر بمؤشر الماوس داخل الخلية التى 
تريد إضافة النص إليها ثم قم بكتابة ما تريدء أو قم بإدارج الصورة بصورة تقليدية باستخدام 
الخطوات المعروفة (قائمة خ۲هء"])ء وللتنقل ما بين خلايا الجدول استخدم مؤشر الماوس أو 
مفاتيح الأسهم ومفتاح ٠۵‏ فى لوحة المفاتيح. 

ويمكنك تنسيق النص الموجود داخل الخلية بنفس الطريقة التى تستخدمها لتنسيق أى نص 
عادي آخر» قم باختيار النص ثم استخدم أدوات التنسيق المعتادة. 

يمكنك أيضا ضبط خصائص كل خلية من خلايا الجدولء ولأداء ذلك اتبع الخطوات 
التالبة: 


1- حدد الخلية (أو الخلايا) التى تريد ضبط خصائصها. 
2- انقر بزر الماوس الأيمن»ء ثم اختر البند كعممه٣‏ اام من القائمة الموضعية المنسدلة 
(انظر شكل 9-3). 
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(شكل 9-3) اختيار الأمر sعناممه۲م‏ اام) من القائمة الموضعية 


يظهر لك مربع الحوار ءعا)ممه۴r‏ اام (انظر شكل 9-4). 


Ea 


1 
Fı mırê 


FIR 
FrTmi ugk 


tis 


[ خن 
(شکل 9-4( مربع Ûlحlر Cell Properties‏ 


3- حدد الخيارات التي تروق لك ثم انقر فوق الزر | ١2ء‏ 
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ساعدتك فصول الباب السابق كما أخبرناك على إنشاء 
موقع. إلا أن فصول هذا الباب ستساعدك على تطوير 
موقع. كيف يتم ذلك؟!ء 

تابع فصول هذا الباب لتعرف ما نرمي إليه: 

الفصل العاشر: التعامل مع أوامرالتحكم 


„Behaviors 


pn 


Pn 


الفصل الحادي عشر: التعامل مع النماذج كصإ۲ه۴. 
الفغصل الثاني عشر: قوالب الويب الديناميكية. 


Pn 
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الفصل 


10 


التعامل مع أوامر llتحSۃ Behaviors‏ 


ما زال الموقع أو الصفحة التي تعمل بها تحتاجح إلى روح. 
الأحدات كإ0اره ء8 قد تقوم بذلك لو استخدمتها بصورة 
لذا سوف نحاول على ضغاف صفحات هذا الفصل التعرف 
عن قرب على كيفية التعامل مع أوامر التحكم. 


يتناول هذا الفغصل الموضوعات التالية: 
ل ما هي أوامر lلiحSڌp .Behaviors‏ 


„Behaviors »lمJl‎ «j> A 


تعيين حدث إلى أحد عناصر الصفحة. 


4 
2 
3 
ادد 
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ما هي أوامر التحكم Behaviors‏ 
أوامر التحكم5إ0ااة86» هي عبارة عن خليط من الأحداث ك۷غ والأفعال A0‏ . 
وفنيًاء يمكنك أن تقول أنها عبارة عن كود ما2۷5۲[ مخصص لإنجاز مهام معينة. أما الحدث 
فهو الشرط الذي يجب أن يحدث لتنفيذ هذا الفعل Acti0ı‏ 
وعند إضافة أمر تحكم في صورة 0۲ا۷٣٠ط‏ إلى أحد عناصر الصفحة التي تعمل بها الآنء فإنه 
يتم تعيين الفعل ١٠ا۸‏ والحدث ١۷ع‏ الذي سيقوم ببدء هذا الفعل. 
ويمكن البدء بتنفيذ عدة أفعال بواسطة نفس الحدث كما يمكن ترتيب هذه الأفعال كما لو 


کان عرض تقديمي ۴۲٥58 "2۲1٥١‏ تقوم بتصميمه للمشاهدين . 


جز ء l)مBehaviorspl4‏ 
ويستخدم جزء المهام ءاهااة٣م8‏ لإضافة أو لتعديل الأوامر الخاصة بأوامر 
۱ lتھBehaviorspS.‏ 


إظھار جjء‏ اأمlqمBehaviors‏ 
ولا أكثر من استخدام قائمة ۴۵٣65‏ )ه٣‏ (انظر شكل 10-1)ء والنقر عليها لتظهر على 
نافذة اليرنامج (انظر شکل 10-2). 
Ti Rinen  irekei  ehe‏ | 
صافت ۶ 
Tag Fropurtin‏ 
E‏ 
Lica Tabkai‏ 
Î hee‏ 


Pauega SH 


aT XIM MF LOT IE:1 
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(شكل 10-2) قائمة ۴2٣6s‏ )5ج۲ بنافذة البرنامج 


ويحتوي جز ء المهام 0۲ات8 على زر رئيسي وحید هو 1"۲ (انظر شکل 10-3). 


Call Srript 

hamge Pope 

Thera Frrrparty Haka 
Tiel. ETRE 

Check Fagin ا‎ 
3 Toi. 

Frum Fru 


Cpr Brcuar reka 2 
E | 

Fepugs HURE 

Preled FSFE 

Sat Tat ظ‎ 
Srp FEF 

Sap Tura Fautriu 


(شكل 10-3) يحتوي جزء المهام اا8 على زر رئيسي وحید هو ۲یہ1 
ويستخدم بصورة رئيسية لإدراج أوامر التحكم وتطبيقها على محتويات الصفحة الحالية. 
مجرد النقر على هذا الزر يعرض عليك قائمة بالافعال ك١هاءA‏ المتاحة. 


وهناك مثلاً من أوامر التحكم هم8 ما يمكنه التحكم في عرض البيانات داخل 
الإطارات كه" ه۴۲» أو تشغيل ملفات صوتيةء أو إجراء عملية ما بمجرد النقر بزر الماسو على 
زر أو صورة داخل الصفحة. 
ويمكن التحكم بالبيانات التي تعرض بداخل الإطار عن طريق الأمر ۸1لا ١آ‏ 60 حيث 
يعمل هذا الأمر على فتح مستند آخر في نفس النافذة أو داخل إطار معين ويتم استخدامه عندما 
نريد تغيير محتويات عدة اطارات في نفس الوقت, حيث يعطينا الإمكانية لفتح ملف 1۲۷1 مختلف 
في كل اطار من الاطارات. 
تعيين حدث إلى أحد عناصر الصفحة 
لابد وأن تعلم أن أوامر التحكم هام8 ما هي إلا مجموعة من الخيارات المبرمجةة 
مسبقاء والتي تتيح لك زياردة معدلات الأداء بسرعةء وتنشيط التفاعلية مع محتويات الموقع سواء 
كانت نصوص أو صور أو كائنات أخرى. يتم ذلك من خلال قیام برنامج Microsof|‏ 
Expression ® Web‏ بكتابة كود اماا»5ة۷ه[ لإدارة أمر التحكم الذي اخترته. 
أبرز الوظائف وأكثرها شيوعًا لأوامر التحكم هي: 
٠‏ ضبط نص شريط المعو مٽ .Status bar text‏ 
ه٠‏ إظهار مربع رسالة ×مط eمومءMes.‏ 
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٠‏ التحقق من برنامج المستعرض المستخدم في استعراض الموقع أو الصفحة. 
٠‏ إعادة توجيه المستخدم إلى صفحات تتناسب مع المستعرض المستخدم. 


تابع الخطوات الاآتية لتعرف كيف يتم ذلك: 
1- قم بتشغيل البرنامج بصورة صحيحة. 
2- انتقل إلى صفحة الويب المراد العمل بها (انظر شكل 10-4). 


(شكل 10-4) صفحة الويب المراد العمل بها 
3- انتقل إلى حيث تريد التعامل مع أوامر التحكم ءإها۷هم8B‏ (انظر شكل 10-5). 
4- قم بإظهار جز ء المهام sمااةم8‏ (راجع شكل 10-1). 
5- تأكد من أنك داخل نمط عرض تحرير المحتويات وأكه0. 
E 2 0 0 00‏ ` 


LE He tn retart fanî r 
: ea hie amel mirpr mbes, It k areze 


a lT lia i jo iT Tî TÛ 


Frit 
E ora kl ir. 


(شكل 10-5) حيث تريد التعامل مع أوامر llتھكp Behaviors‏ 
6- انقر الزر ٤#۲ءم]‏ في جز ء المهام ئامااةم8 (انظر شكل 10-6). 


94 


al Script 
hang Property 
Thargs Property Fautciu 
Tek Briere 

hark Pkg 


i Ta FL 


(شكل 10-6]) قائمة أوامر التحكم المتاحة 
7- اختر أمر التحكم ×۲ 6ء ثم اختر الأمر ٣2ط‏ كtuمtك‏ ۴ه »مآ tهك‏ من القائمة الفرعية 
المنسدلة (انظر شكل 10-7). 


Pip? FEF 
ame 


SE Taf Df Tok Fk] 


(شكل 10-7) اختيار الأمر ٣2ط‏ sںأهاك‏ ه ٠٠×‏ م5 من القائمة الفرعية المنسدلة 


یظھر مربع الحوار ۹۲ط sںtuھsSt Set rext of‏ (انظر شکل 10-8). 


Fl saî Ted ol Slate Har 


Fmnaga: | air, Egept ... +ZILZ WHO 


(شكل 10-8( مرع Ûحوlر Set Text of Status bar‏ 
8- أدخل النص الذي يروق لك ثم انقر فوق الزر | 
الآنء قمنا بإعلام برنامج Microsoft Expressio¬® Web‏ بماذا یفعل ٥iاAc.‏ ولکننا لم 
نخبره» متى يفعل ذلك» ومع أي حدث ١٠۷ع.‏ تابع السطور القادمة لتعرف كيف يتم ذلك: 
1- تأكد من حسن سير العمليات والخطوات السابقة بالكامل. 
2- لاحظ إضافة الفعل الذي طلبنا تنفيذه في جز ء مهام كامااةم8 (انظر شكل 10-9). 


(شكل 10-9) الفعل الذي طلبنا تنفيذه في جزء مهام Be20‏ 


95 


3- بمجرد وضع مؤشر الماوس فوقه» يظهر سهم لأسفل يشير لوجود قائمة (انظر شكل 10- 
10( 


(شكل 10-10) سهم لأسفل يشير لوجود قائمة 
4- افتح هذه القائمة لترى الأحداث المتاحة (انظر شكل 10-11). 
er e‏ 


L.-J 7 
Eteyri! in 
renee. WF] eText af Stak 


real bi: 


(شكل 10-11) القائمة تتضمن الأحداث التي يمكن تطبيقها 
5- اختر الحدث )ا٤0‏ ثم قم بحفظ الصفحة. 
الآ محرد شى کته المقحة کے ال ته وقوه آل عل كة نة 
بالصفحة السابقة (راجع شكل 10-5)» سيتم عرض نص معين على شريط المعلومات (راجع 
شكل 10-8) أسفل نافذة برنامج متصفح الإنترنت. 
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الفصل 


11 


التعامل مع النماذج ۴٥٣٣۶‏ 


تعتبر النماذج احد أهم محتويات صفحات الويب. فقد تكون 
مسؤولة عن تجميع بيانات من المستخدمينء أو التحقق من 
هويتهمء أو الوصول إليك والتواصل معك» وغيرها من 
الوظانف الحيوية. 

لذا سوف نحاول على ضغاف صفحات هذا الفصل التعرف 
عن قرب على كيفية التعامل مع النماذج ٣۶‏ ۲ا٥۴.‏ 


يتناول هذا الفغصل الموضوعات التالية: 


pn 


ما هي النماذج ۶إ۲ا٥۴.‏ 


pn 


کیف تعمل النماذج؟ 
ما هي عناصر التحکم .€C٥۸)۲01۶‏ 


.€C٥۸ ٤۲01۶ عناصر التحکم‎ 


pn 


pn 


3 
۹ 
هھ 
٤‏ 
د 
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ما هي النماذج Forms‏ 

النماذج ۴٠۲۳٣١‏ هي أجزاء من صفحات الويب الهدف منها تجميع بيانات من زائري موقع 
الويب» ومن خلال النموذج يقوم زائر الصفحة بالإجابة على الأسئلة التى تقوم بتحديدها أو كتابة 
المطلوب من البيانات التى قمت بطلبهاء وبعد ذلك يقوم النموذج بإرسال البيانات التى تم إدخالها 
إلى جزء خاص داخل موقع الويب الذي يستضيف هذا النموذج» حيث تستطيع عندها أن تصل 
إلى تلك البيانات. (انظر شكل 11-1) لترى شكل لنموذج من النماذج التي يمكن استخدامها فى 
ضقخات الریب: 


3 2 Tirr OB Wp titê f kao li! Co tae LE... - ME rato îi firê Exp laf 


Ek EM ie Fits. E HH 


e 2‏ ص ۴ لکا قا ا 0 


FFTs 1 Ftp fere, Cire ciarg rf ciher_caT kaca _ HF 


(شكل 11-1) شكل لنموذج من النماذج التي يمكن استخدامها فى صفحات الويب 
أهداف النماذج؟ 

يتم استخدام النماذج داخل صفحات الويب لبعض أو كل الاهداف الآتية: 

ه٠‏ إرسال زوار الموقع لآرائهم عن الموقع أو الخدمة» أو عن موضوع (انظر شكل 2- 
11( 

٠‏ تسجيل بيانات اتصال زوار الموقع. 
ه٠‏ استرجاع بيانات معينة وليكن منتج ما. 
ه٠‏ قبول أوامر الشراءء وتجميع بيانات الشحن والفاتورة. 
٠‏ ملء نماذج الأستبيان. 
ه٠‏ استعراض نتائج البحث عن بعض محتويات الموقع. 
ه٠‏ تنبيه المستخدمين لإدخال بيانات دخولهم للموقع. 
ه٠‏ التسجيل في الموقع بغرض الإشتراك في خدمة ما (انظر شكل 11-3). 
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یر ۔ شوہ - بوس يتم نسو ريا قيا ہالتيال حبذو و الخاد يقم ليان 3 
Em E fee Flee: i Hp‏ 


a:0 HAUS 3-b 


eps آ#‎ Htpc[ freres. ijîn. rat HA xarna IFZETZ ZILET LZ ET-EF-DT 


Em 
وة عاق ا انق قا فر یا‎ 


5 


E] Dona BE hi arcs DADA! 
(شكل 11-2) أحد النماذج التي يمكن استخدامها فى صفحات الويب‎ 
a! 

Ch EH a Fain er hab 

a0 HAG © 


EF |] Hirer. chal rh rar ar 1# | EI 


المزحلة الراسية: 
اعيا البرينف: 


(شكل 11-3) أحد نماذج التسجيل على الإنترنت 
كيف تعمل النماذج؟ 
عندما يقوم زائر الموقع بإدخال بيانات إلى النموذج» يعمل برنامج خاص موجود على 
خادم الويب الذي يستضيف موقعك و١‏ اه٣‏ عاك ط۷6 بتجميع تلك البيانات ويضعها داخل ملف 
(إما ملفا نصيًاء أو ملف بصيغة 1۳۷1ء أو ملف بصيغة أخرى مقروءة) ثم يقوم بحفظ هذا الملف 
داخل مجلد خاص تقوم نت بتحدیده كما سنری لاحقا. 


لاحظ أن الكلمات التي تظهر بالخط الأسود العريض اه8 هى أسماء بنود النموذج 
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(وسنتعرف على كيفية تحديد تلك الأسماء لاحقا)ء والكلمات التى تظهر بالخط العادي هى البيانات 
التى سيقوم زائر الموقع بإدخالهاء أو كتابتهاء أو تحديدها داخل النموذج. 


ما هي عناصر التحکم واهr†ہCo‏ 

نقوم باستخدام عناصر تحكم مختلفة للحصول على أنواع مختلفة من المعلومات. فمثلاء 
لتجميع معلومات من زائر الموقع» فسوف تستخدم عناصر تحكم من نوع text boxes‏ ڼو text‏ 
.٥‏ ولعمل نموذج لطلب سلعة» أو شحن منتج» وإصدار فاتورة» فسوف تستخدم عناصر تحكم 
من نو ع b0×esط drop-down‏ أو option buttons‏ بالإضافة إلی ما سبق۔ 


جزء المھام >boاToo‏ 

وهو أحد أجزاء المهام التي تختص بإدراج عناصر التحكم. ويتم إظهارها بصورة تقليدية 
من خلال قائمة مه۴ )ئةآ. وهي تعرض عليك كافة عناصر التحكم المتاحة وفق تبويبين هما 
HTML‏ و 5P. Controls‏ (انظر شكل 11-4). ولكل منهما علامة "+" للدلالة على إمكانية 
توسيعها لعرض خيارات أخرى. 


(شكل 11-4) التبويبين هما Toolbox مlمئll ¢ jجڊ ASP.NET Controls gy H7ML‏ 
اا اة رف بال د كا ى اع ا 


عناصر التحكم Controls‏ 
الجدول التالي يتضمن قاتمة ببعض عناصر التحكم التي يمكنك استخدامها: 
عنصر التحكم الوظيفة التي يقوم بها 
Advanced button‏ | أحد الأزرار التي تتيح خيارات أوسع وأكثر من الزر اامه!. 
Drop-down box‏ | قائمة منسدلة. 
×0ط upداG‏ | خيارات مجمعة 
put )Butt0n(‏ | زر للضغط علیھ. 


np‏ | زر للخيارین ۴۴؟01/0. 
(Checkbox)‏ 


(۴1۵) ام1 | عنصر تحكم يتيح للمستخدم اختيار ملف وإرفاقه بنموذج. 
put )Hide0(‏ | عنصر تحكم يبعث ببيانات أثناء استخدام النموذج. 
put )]28e(‏ | عنصر تحكم يظهر كصورة ويتيح إرسال معلومات. 


put )Psswor(‏ أ عنصر تحكم يتيح للمستخدم إدخال كلمات المرور. وغالبًا من تكون مخفية 
ونار فلا حه عاات ٠‏ 


100 


عنصر التحكم الوظيفة التي يقوم بها 
(ەRadi)‏ putہ!‏ | زر للخیارین 0۴۴/ہ0 بخیارات خاصة. 
(66كعR)‏ nputا ‏ عنصر تحكم يقوم بإلغاء البيانات المدخلة بالنموذج الحالي. 
6ا طSu) put‏ | عنصر تحكم يقوم بإرسال البيانات المدخلة بالنموذج الحالي. 
(۳×1) ااا | عنصر تحکم لإدخال نصوص. 
1 | عنصر تحكم لإدخال عنوان ثابت لعنصر تحكم أخر. 
"e> 4‏ أ عنصر تحكم لإدخال نصوص كثيرة. 


أغلب هذه الأزرار يتطلب إلحاق کود َو برنامج صغير به. فمثلاًء الزر 
Submit 6a‏ سيكون أحد هذه الأنواع» فما الكود المطلوب تنفيذه بمجرد نقر 


المستخدم له. 
إنشاء نمو ڏج 
لإنشاء نموذج ۴۵٥۲۳‏ داخل صفحة من صفحات الويب» لابد وأن تعلم أن برنامج 
Microsoft Expression® Web‏ يتبع الوا ماتلا عن برامج آکرئ ا دار ات اکر فدلا 
من إدراج النموذج بالكامل» بصورة قد لا تناسب عملك» اتجه برنامج ١® We‏ 0٥iءومام×E‏ إلى 
إدراج مكونات النموذج بصورة فردية كما يروق لك. 
لذلك» يتم إدراج النموذج في برنامج Microsoft Expressi0 ^® We‏ على مرحلتین هماء 
إدراج عنصر تحكم النموذج ۴٠۲۳‏ تم إدراج عناصر التحكم ام٣٣‏ التي تناسب حاجتك. 
لذاء وعلى افتراض أننا نرغب في إدراج نموذج يتضمن البيانات الآتية: 
الاسم: 
اسع العا 
٠‏ البلد/الدولة: 
٠ه‏ الهاتف: 
٠ه‏ البريد الإلكتروني: 
٠‏ التعليق: 
لحمل ذلك؛ بمكتك مقابعة الخطرات التالة: 
1- قم بفتح أي موقع من المواقع التى قمنا بإعدادها فى الفصول السابقة. 
2- قم بإنشاء صفحة جديدة خاليةء وقم بتسميتھا باسم ™ .Contact F0]‏ 
3- قم بإدخال أية بيانات تناسب عملك» وليكن كما في الشكل التالي (انظر شكل 11-5). 
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(شكل 11-5]) إدخال أية بيانات تناسب عملك 
4- ضع المؤشر الماوس بنهاية محتو ى الصفحة حيث سیتم إدراج النموذج. 
25 قم بإاظهار جزء المهام ×100150 بصورة تقليدية (انظر شکل 11-6). 
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Parastin bbs ۴ 


ولك 
a LR TTT‏ 


(شكل 11-6) إظهار جزء المهام ×هطاهه٠‏ بصورة تقليدية 
6- قم بإظھار محتويات القائمة الفرعية sا٥ ۴٣۳ e٣٣‏ من داخل جز ء المھام ×0طام٥ ٣‏ عن 
طريق نقر العلامة "+" (انظر شكل 11-7). 
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(شكل 11-7) إظهار محتويات القائمة الفر عية Form Cos‏ 


[eroup Boi 
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E. 
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7- انقر بالنقر بزر الماوس الأيمن على عنصر التحکم .۴0۲٣١‏ 


8- اختر الأمر ۲ء1 من القائمة الموضعية المنسدلة (انظر شكل 11-8). 


(شكل 11-8) الأمر ۲۲مء"1 بالقائمة الموضعية المنسدلة 


يتم إدراج عنصر التحكم بالصفحة» وبالمكان المحدد. 
9- اكتب عناوين البيانات التي أخبرناك عنها اقا مثل الاسم» واسم العائلة» وغيرها بالصفحة 


(انظر شكل 11-9). 


Tei.: +a i12 SAU 2BBÛ 

a -reil nfoijlnrmdes e, cam 
For any Feeder k, plear e TN ihe Tallereer form: 
[fern] 


Hami 


Fa +2 2 کت‎ 11 


Family Pamer 


103 


(شكل 11-9) إدراج كافة عناوين بيانات النموذج 

0- انقل مؤشر الماوس بجانب الحقل عم۳ه١.‏ 

1- انقر بالنقر بزر الماوس الأیمن على عنصر التحکم )٣۵×٤(‏ tںuمہ1ء‏ ثم اختر الأمر tاھsہ1‏ 
من القائمة الموضعية المنسدلة (راجع شكل 11-8)ء ليتم إدراج عنصر التحكم بالمكان 
المحدد. 

2- كرر نفس الخطواة السابقة مع كل مكونات النموذج. 

3“ قم بإدراج زرين للإرسال Input )Submi†(‏ و Input )Reset)‏ بنهاية النموذج. 
يتم إدراج عناصر التحكم بالصفحة» وبالأماكن المحددةء لتظهر الصفحة بالشكل التالي (انظر 
شکل 11-10). 


Lii 
Phir 


Kites FSi E Cada ٣ 
` ê kcal Mul _ HEF _Kamdê WI 4 HE HEM 1, 


(شكل 11-10) إدراج كافة عناصر التحكم بالنموذج 
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قوالب الويب الديناميكية 


أتاح لك ڊرiامج Microsoft Expression ® Web‏ إنشاء نسخة 
رئيسية من صفحات الويب التي تقوم بإنشانهاء وأتاح لك 
أيضًا إمكانية تحديد كافة الخصانص الخاصة بها ومن تم 
اكتساب الصفحات الجديدة نفس الخصانص. دون الحاحة 
إلى أعادة تطبيقها مرة أخرى. 

تابع معنا صفحات هذا الفصل لتعرف كيف يتم ذلك. 


يتناول هذا الفغصل الموضوعات التالية: 
ما هي قوالب الويب الديناميكية زإ4١0y‏ 
.Web Templates‏ 
۸ شريط أدوات قوالب الويب الديناميكية. 
إنشاء قالب ویب دینامیکي. 


إنشاء صفحة ویب باستخدام قالب ويب 


۹4 
3 
a 
3 
: 
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ما هي قوالب الويب الديناميكية 

قوالب الويب الديناميكية ءعatام Dynamic Web em‏ ما هي إلا صفحات ویب من نوع 
HM‏ سابقة التجهيز ومزودة بكافة الخصائص والإعدادات والتنسيقات» ومختلف عناصر 
الصفحة متل النصوص والصور» وغيرها. 

ليس ذلك فحسب» بل أيضًا يمكنك تحديد المناطق التي يمكن تعديلها والتي لا يمكن 
تعديلها. الأمر الذي يفيد كثيرَّا في حالة إسناد الأعمال إلى غيك ولا ترغب في تعديل شئ ثابت 
بالموقع. 

وفي برنامج طWe Microsoft Expressi0^®‏ نقوم بإرفاق قالب ويب ديناميكي إلى 
صفحات الموقع الذي نعمل به» وسوف يقوم هذا القالب بتحديد تخطيط هذه الصفحات. يتيح لك 
برنامج W٥‏ ©0 اء5ه۲م×٤‏ استخدا عدد غير نهائي من قوالب الويب الديناميكية. 


شريط أدوات قوالب الويب الديناميكية 

خا فعل برنامج Microsoft Expression ® Web‏ بأن خصص شریط ادو ات للتعامل مع 
مثل هذا النوع من الصفحات. فمثلاء يمكنك استخدام شريط الأدوات للإنتقال إلى منطقة يمكن 
تا اکل قا ال 
إظهار شريط أدوات القوالب 


ولا أكثر من نقر أي شريط أدوات بزر الماوس الأيمن» تم اختر الشريط طWe Dynamic‏ 
امصe‏ من القائمة الموضعية (انظر شكل 12-3). 


Ruitieriba..: | 


(شكل 12-3) الشريط ءع†aام Dynamic Web ۲e»‏ بالقائمة الموضعية 
ليظهر شريط الأدوات في المكان الافتراضي له (انظر شكل 12-4). 


Dynamic ¥Y¥eb Templat Y Xx 


Dynamic Web Templates (شكل 12-4) شرıط İدو ات‎ 
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إنشاء قالب ويب ديناميكي 
بدا أولاً بإئشاء صفحة ويب تقليدية بتنسيق »٨1-‏ ثم نقوم بحفظها بصيغة (تنسيق) 
.. يتم ذلك بواسطة الخطوات الآتية: 
1- قم بتشغيل البرنامج بصورة صحيحة. 
2- قم بفتح موقع الويب الذي قمنا بالعمل به. 
3“ قم بإنشاء صفحة ويب جديدة. 


4- قم بحفظھا بتنسیق ءعtھام Dynamic Web ۲e”‏ (انظر شکل 12-5). 
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(شكل 12-5) حفظ الصفحة ڊتiصڍق Dynamic Web Templates‏ 
الآن قمت بإنشاء الصفحة بالتنسيق المطلوب (انظر شكل 12-6). 
[ir Ta ۴ 2 E‏ 
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(شكل 12-6) حفظ الصفحة ڊتiصڍق Dynamic Web Templates‏ 
إضافة منطقة تعديJ‏ بيlنlٽ Editable Regions‏ 
بدايةء يمكنك إنشاء أي عدد من المناطق القابلة للتعديل كه٠۸۲‏ عاطهاكع داخل الصفحة. 
ولكن على أية حال ستكون في حاجة إلى واحدة على الأقل بحيث تكون لكل صفحة محتواها 
الخاض 
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تابع الخطوات الآتية لتعرف كيف يتم ذلك: 
1- تأكد من فتح الصفحة السابقة. 
2- تابع إحدى الطرق الآتية: 
٠‏ نقر الأداة ا بشريط دو Iٽ .Dynamic Web Templates‏ 
٠‏ وأنت في نمط العرض «واءه٥؛ء‏ انقر بزر الماوس الأيمن داخل صفحة القالب» تم اختر 
الأمر Manage Editable Regions‏ من القائمة الموضعية المنسدلة (انظر شكل 12-7). 


(شکل 12-7) الأمر اوم8 eاطbھtاك٤‏ eوNan2‏ من القائمة الموضعية المنسدلة 


وفي كل الأحوال» سيظهر مربع الحوار ك0اوم۸ ماطهاكع (انظر شكل 12-8). 
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(شكل 12-8( مرب |l>Ûر Editable Regions‏ 
3- اكتب اسم منطقة التعديل في خانة e‏ 2ہ .Region‏ 
4- انقر فوق الزر أل۸. 
يقوم البرنامج بإدراج منطقة بالاسم المختار وهو رل8 (انظر شكل 12-9)»ء وإتاحة 
عملية التعديل بها. 
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Editable Regions رlg>|Û| (شکل 12-9( مربع‎ 


إعادة تسميةء أو حذف منطقة تعديل 

ولا أكثر من متابعة الخطوات السابقةء حتى الوصول إلى مربع y>Jiار Editable‏ 
5ه (راجع شكل 12-8). ومن ثم اختيار اسم المنطقة المراد إعادة تسميتهاء أو حذفهاء ثم 
نقر الزر المناسب. 


لقد حددنا المنطقة أو المناطق القابلة للتعديل» لابد أيضًا من إدخال النصوص 
والعناصر الأخرى المراد إظهارها فقط دون تعديل. 


إنشاء صفحة ویب باستخدام قالب ویب دینامیکي. 
وما فعلت هذا القالب إلا ليوفر وقتك وجهدك» حيث نستخدمه في إنشاء صفحات كثيرة. 
تابع الخطوات الآتية لتعرف كيف يتم ذلك: 
1- قم بتشغيل البرنامج بصورة صحيحة. 
2- قم بفتح موقع الويب الذي قمنا بالعمل به. 
3- تأكد من وجود القالب المراد اختياره في إنشاء صفحة ويب جديدة. 
4- اختر الأمر "٥W...‏ من قائمة عاا۴. 
5- اختر الأمر Create from Dynamic Web Template‏ من القائمة الفرعية المنسدلة (انظر 
شكل 12-10). 
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(شكل 12-10( لمر Create from Dynamic Web Template‏ من القائمة الفرعية 


يظھر مربع لحور Attach Dynamic Web Template‏ (انظر شکل 12-11). 
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(شكل 12-11( ربع Ûھlgر Attach Dynamic Web Template‏ 
6- اختر القالب المطلوب استخدامه في إنشاء الصفحة الجديدة. 
7- انقر فوق الزر .00€١‏ 
يقوم البرنامج بإظهار الصفحة الجديدةء مع تحديتها بالعناصر والمحتويات الثابتة بهاء ويخبرك 
بذلك (انظر شكل 12-12). 


e 


(شكل 12-12) تحديث الصفحة بالعناصر والمحتويات الثابتة بها 
8- انقر فوق الزر ععهاZ.‏ 
تظهر الصفحة الجديدة بمنطقتها القابلة للتعديل» وعند الإشارة إلى إحدى محتوياتها التابتةء 
تظهر علامة @ أمامها. 
9- قم بإجراء كافة عمليات على هذه الصفحة كما تريد. 


ق اكاك ل اقلت ية اة من خان اال مسا ك عا 
5 تقوم بفتحها وتعديلهاء وحفظها. 
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